2c:null 2d:["$","title",null,{"children":"Drawing Simple Bézier Curves with SVG path element | KyungYeol Kim | Observable"}] 32:T491,# Drawing Simple Bézier Curves with SVG path element *${icon({ text: "subscribe me", collection: "blog" })}* `` 에 두 개의 점 ${bullet("lime")} `(${point1.join(", ")})` ${bullet( "tomato" )} `(${point2.join(", ")})` 이 있습니다.33:Ta07,viewof curve = { let handle, curve, label; const p1 = { color: "lime", x: point1[0], y: point1[1] }; const p2 = { color: "tomato", x: point2[0], y: point2[1] }; const c1 = { color: "gold", x: (p1.x + p2.x) / 2, y: point1[1] }; const c2 = { color: "gold", x: (p1.x + p2.x) / 2, y: point2[1] }; function dragged(d) { d3.select(this) .attr("cursor", "grabbing") .attr("cx", (d.x = d3.event.x)) .attr("cy", (d.y = d3.event.y)); handle .attr("x1", (d) => d[0].x) .attr("y1", (d) => d[0].y) .attr("x2", (d) => d[1].x) .attr("y2", (d) => d[1].y); label.attr("x", (d) => d.x).attr("y", (d) => d.y); curve.attr( "d", `M ${p1.x},${p1.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${p2.x},${p2.y}` ); svg .property("value", { p1: { x: p1.x, y: p1.y }, p2: { x: p2.x, y: p2.y }, c1: { x: c1.x, y: c1.y }, c2: { x: c2.x, y: c2.y } }) .dispatch("input"); } const svg = d3.select(DOM.svg(width, height)).property("value", { p1: { x: p1.x, y: p1.y }, p2: { x: p2.x, y: p2.y }, c1: { x: c1.x, y: c1.y }, c2: { x: c2.x, y: c2.y } }); curve = svg .append("path") .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("fill", "none") .attr( "d", `M ${p1.x},${p1.y} C ${c1.x},${c1.y} ${c2.x},${c2.y} ${p2.x},${p2.y}` ); handle = svg .selectAll(".handle") .data([ [p1, c1], [p2, c2] ]) .enter() .append("line") .attr("stroke", "lightgray") .attr("stroke-width", 2) .attr("stroke-dasharray", "3,3") .attr("x1", (d) => d[0].x) .attr("y1", (d) => d[0].y) .attr("x2", (d) => d[1].x) .attr("y2", (d) => d[1].y); svg .selectAll("circle") .data([p1, p2, c1, c2]) .enter() .append("circle") .attr("r", 5) .attr("fill", (d) => d.color) .attr("cursor", "grab") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .call( d3 .drag() .on("drag", dragged) .on("end", function () { d3.select(this).attr("cursor", "grab"); }) ); label = svg .selectAll("text") .data([c1, c2]) .enter() .append("text") .style("font-size", 14) .style("font-style", "italic") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("dx", 9) .attr("dy", 4) .text((d, i) => `c${i + 1}`); return svg.node(); }34:[] 30:{"id":"f19bccb5a8e18113","slug":"draw-simple-bezier-curves-with-svg-path-element","title":"Drawing Simple Bézier Curves with SVG path element","thumbnail":"aa3b530c4cf09a977eb9f94d597ba449ce3949b27613852ff414b7b1d4954079","access_level":"public","create_time":"$D2018-08-04T08:48:59.792Z","update_time":"$D2021-08-29T16:50:16.761Z","view_time":null,"first_public_time":"$D2018-08-05T16:56:00.047Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":497,"publish_version":497,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"6d39e1a0c0d88bcd","slug":"blog","title":"Blog","owner":{"id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim"}},"type":"notebook","body":{"title":"Drawing Simple Bézier Curves with SVG path element","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"`` 의 [d 속성](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)을 사용하면 두 점을 있는 선을 그릴 수 있습니다. d 속성은 [path command](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands)로 (이하 *커맨드*) 불리는 몇 가지 글자와 숫자들로 이루어져 있습니다. 여기서는 `M` (*MoveTo*) 과 `L` (*LineTo*) 커맨드를 사용했습니다.\n\n`M` 커맨드 다음에 ${bullet('lime')} 점의 위치를, `L` 커맨드 다음에 ${bullet('tomato')} 점의 위치를 선언하면, 두 점을 잇는 직선을 그릴 수 있습니다.\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"`C` 커맨드를 사용하면 (우리가 원하는) Cubic Bézier Curve 를 그릴 수 있습니다. `C` 커맨드를 사용하기 위해서는 두 개의 점이 ${bullet('gold')} `(${midX}, ${point1[1]})`, ${bullet('gold')} `(${midX}, ${point2[1]})` 더 필요합니다. 이 점을 control point (이하 *컨트롤 포인트*) 라 부릅니다.\n\n`M` 에 ${bullet('lime')} 점의 위치를, `C` 에 두 개의 컨트롤 포인트 *c1* ${bullet('gold')} `(${midX}, ${point1[1]})`, *c2* ${bullet('gold')} `(${midX}, ${point2[1]})` 를 차례로 선언하고, ${bullet('tomato')} 의 위치를 선언합니다. 두 점을 ${bullet('lime')} ${bullet('tomato')} 를 잇는 부드러운 곡선을 확인할 수 있습니다.\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"컨트롤 포인트 *c1* ${bullet('gold')}, *c2* ${bullet('gold')} 는 각자 연결된 점에 가까운 곡선의 형태를 결정합니다. 아래 곡선에서는 ${bullet('lime')} ${bullet('tomato')} x 축 중점에 컨트롤 포인트 ${bullet('gold')} 를 놓았습니다. (이 방법은 [d3.linkHorizontal](https://github.com/d3/d3-shape#linkHorizontal) 함수가 두 점을 연결하는 곡선을 그리는 방법과 동일합니다.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"아래 4개의 슬라이더를 통해 컨트롤 포인트 *c1* ${bullet('gold')} 과 *c2* ${bullet('gold')} 위치를 조절할 수 있습니다. 변경된 컨트롤 포인트의 위치는 곡선에 바로 반영됩니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof c1 = pointController([165, 140])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof c2 = pointController([165, 60])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"사실 4개의 슬라이더는 필요없습니다. [d3.drag](https://github.com/d3/d3-drag) 의 도움을 받으면, 모든 점 ${bullet('lime')} ${bullet('tomato')} ${bullet('gold')} 을 직접 컨트롤 할 수 있습니다. 역시 변경된 점의 위치는 곡선에 바로 반영됩니다.\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"## references\n* https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d\n* https://www.w3.org/TR/SVG11/paths.html\n* [@mbostock/d3-brushable-scatterplot](https://beta.observablehq.com/@mbostock/d3-brushable-scatterplot)\n* [@jrus/bezier-segment](https://beta.observablehq.com/@jrus/bezier-segment)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"## setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof point1 = pointController([5, 140])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof point2 = pointController([325, 60])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"bullet = color => ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"pointController = ([x, y]) => {\n const form = html``\n form.oninput = () => {\n form.output_x.value = form.x.valueAsNumber.toString().padStart(3)\n form.output_y.value = form.y.valueAsNumber.toString().padStart(3)\n form.value = [form.x.valueAsNumber, form.y.valueAsNumber]\n }\n form.oninput()\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"midX = (point1[0] + point2[0]) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"import {icon} from '@chitacan/rss'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"