3f:null 40:["$","title",null,{"children":"d3.path | onepisya | Observable"}] 46:T9c8,md`## Complete API 以下方法在 **d3-path** 的 [API documentation](https://github.com/d3/d3-path/blob/master/README.md#path)中列出。这个表格总结了 **d3.path** 将 **Canvas命令** 转换为 **SVG路径** 命令。 | Canvas | SVG | Description | |------------------|------------|-------------| | [moveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands) | move to the given coordinates（坐标） | | [closePath](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) | [Z](https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand) | 画一条线到当前子路径(sub-path)的开始 | | [lineTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo) | [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands) | draw a line | | [quadraticCurveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo) | [Q](https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands) | draw a quadratic Bézier curve 二次方贝塞尔曲线 | | [bezierCurveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo) | [C](https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands) | draw a cubic Bézier curve 三次方贝塞尔曲线 | | [arcTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [A](https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands) | draw a circular arc(圆弧) (and possibly line) | | [arc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [A](https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands) | draw a circular arc | | [rect](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [h](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [v](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [Z](https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand) | draw a axis-aligned rectangle 画一个与轴对准的矩形 |`47:T4c9,{ const x0 = 40, y0 = 100, // (x0,y0) 起始点 cpx = 150, // (cpx,cpy) 控制点 cpy = 280, x = 350, // (x,y) 结束点 y = 20; const path = d3.path(); path.moveTo(x0, y0); path.quadraticCurveTo(cpx, cpy, x, y); const chart = svg``; // return chart; /** * Add control elements and prepare interactions * 添加控制元素并准备交互 */ const points = [ [x0, y0], [cpx, cpy], [x, y] ], labels = ["Start", "Control", "End"], lines = [ [points[0], points[1]], // Start 到 Control [points[1], points[2]] // Control 到 End ], draw = () => { const path = d3.path(); path.moveTo(...points[0]); // 移动到起始点 path.quadraticCurveTo(...points[1], ...points[2]); // 二次贝塞尔曲线 1 是控制点 2是结束点 // 新更新一个 path return path; }; // chart 是一个 svg // draggable 将绘制一些辅助线。 // lines 是辅助线 // draw 根据坐标画一个新的二次贝塞尔曲线的 path draggable(chart, points, labels, lines, draw); return chart; }48:T5fe,{ const path = d3.path(), x0 = 310, y0 = 130, x = 120, y = 120, radius = 100, startAngle = 0, endAngle = 2 * Math.PI - 1, moveto00 = arcOptions?.includes("moveTo"), anticlockwise = arcOptions?.includes("anticlockwise"); const chart = svg``; const points = [ [x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle)], [+radius * Math.cos(endAngle), y + radius * Math.sin(endAngle)] ], labels = ["startAngle", "endAngle"], lines = [], draw = () => { const startAngle = Math.atan2(points[0][1] - x, points[0][0] - y), endAngle = Math.atan2(points[1][1] - x, points[1][0] - y), radius = Math.sqrt((points[0][1] - x) ** 2 + (points[0][0] - y) ** 2); points[0][0] = x + radius * Math.cos(startAngle); points[0][1] = x + radius * Math.sin(startAngle); points[1][0] = x + radius * Math.cos(endAngle); points[1][1] = x + radius * Math.sin(endAngle); const path = d3.path(); if (moveto00) path.moveTo(...points[2]); path.arc(x, y, radius, startAngle, endAngle, anticlockwise); return path; }; if (moveto00) { points.push([x0, y0]); labels.push("⟨x0, y0⟩"); } draggable(chart, points, labels, lines, draw); return chart; }49:T4d1,chart = { const x0 = 40, y0 = 100, // (x0,y0) 起始点 cpx = 150, // (cpx,cpy) 控制点 cpy = 280, x = 350, // (x,y) 结束点 y = 20; const path = d3.path(); path.moveTo(x0, y0); path.quadraticCurveTo(cpx, cpy, x, y); const chart = svg``; // return chart; /** * Add control elements and prepare interactions * 添加控制元素并准备交互 */ const points = [ [x0, y0], [cpx, cpy], [x, y] ], labels = ["Start", "Control", "End"], lines = [ [points[0], points[1]], // Start 到 Control [points[1], points[2]] // Control 到 End ], draw = () => { const path = d3.path(); path.moveTo(...points[0]); // 移动到起始点 path.quadraticCurveTo(...points[1], ...points[2]); // 二次贝塞尔曲线 1 是控制点 2是结束点 // 新更新一个 path return path; }; // chart 是一个 svg // draggable 将绘制一些辅助线。 // lines 是辅助线 // draw 根据坐标画一个新的二次贝塞尔曲线的 path draggable(chart, points, labels, lines, draw); return chart; }4a:T48b,// update 在 draggable 中使用。 function update(chart, points, labels, lines, draw) { console.log("update"); d3.select(chart).select(".u-path").attr("d", draw()); // 默认就是叫做 u-path //label text and point d3.select(chart) .selectAll(".u-point") .data(points) // 绑定点的数据 Start 和 Circle 以及画出辅助线和 label .join((enter) => enter .append("g") .classed("u-point", true) .call((g) => { // 添加 circle 和 label g.append("circle").attr("r", 3); g.append("text") .text((d, i) => labels[i]) .attr("dy", (d) => (d[1] > 100 ? 15 : -5)); }) ) .attr("transform", (d) => `translate(${d})`); // d 就是 points 里面的三个数组中的一个数组，也就是 start control end 三个点的坐标。 // 画辅助线 // Start 到 Control // Control 到 End d3.select(chart) .selectAll(".u-line") .data(lines) .join("line") .attr("x1", (d) => d[0][0]) .attr("y1", (d) => d[0][1]) .attr("x2", (d) => d[1][0]) .attr("y2", (d) => d[1][1]) .classed("u-line", true); }4b:Tb87,function draggable(chart, points, labels, lines, draw) { // update(chart, points, labels, lines, draw); throttledUpdate(chart, points, labels, lines, draw); // 计算两点之间的距离。 const dist = (p, m) => { // p 是一个点的坐标，也就是鼠标所在的点。 // m 也是一个点的坐标。 // return Math.sqrt((p[0] - m[0]) ** 2 + (p[1] - m[1]) ** 2); return Math.hypot(p[0] - m[0], p[1] - m[1]); }; var subject, dx, dy; // 此函数用于找到距离鼠标最近的可拖动点，返回坐标值，并修改 style。 function dragSubject(event) { const p = d3.pointer(event.sourceEvent, chart); // 鼠标指针的位置 // p 是一个数组，[x1,y1] 类似这样的。 // points 是 start control end 三个点的一个数组 subject = d3.least(points, (a, b) => dist(p, a) - dist(p, b)); // 升序排序返回较小的那个 // subject 是三个点钟距离鼠标指针最近的那个点。 if (dist(p, subject) > 48) subject = null; // 鼠标距离大于 48 则不处理。 if (subject) { d3.select(chart).style("cursor", "hand").style("cursor", "grab"); console.log(subject, "dragsubject"); } else { d3.select(chart).style("cursor", null); } return subject; } const moveHandle = throttle( (event) => dragSubject({ sourceEvent: event }), delay - 10, { trailing: true, leading: true } ); // 事件绑定。 d3.select(chart) .on("mousemove", moveHandle) .call( d3 .drag() .subject(dragSubject) // 指定 subject 可被拖动的元素 .on("start", (event) => { if (subject) { d3.select(chart).style("cursor", "grabbing"); console.log("event.x", event.x); console.log("event.y", event.y); console.log("subject in start", subject); dx = subject[0] - event.x; // 记录被拖动点原位置相对于 start 拖动的时候的位置的差值 // 这样被拖动点的结束位置，就可以由最后一次事件的鼠标位置加上差值得出。 // 因为移动轨迹是两条平行线。 dy = subject[1] - event.y; } }) .on("drag", (event) => { if (subject) { subject[0] = event.x + dx; subject[1] = event.y + dy; } }) .on("end", () => { d3.select(chart).style("cursor", "grab"); // 结束的时候修改 svg 的样式值 }) .on("start.render drag.render end.render", () => { //渲染图形。 // 点击鼠标的时候是 start.render // 拖动的时候触发的是 drag.render // 释放鼠标的时候触发的是 end.render // return update(chart, points, labels, lines, draw); return throttledUpdate(chart, points, labels, lines, draw); }) ); }4c:[] 44:{"id":"cd5479a9fcafc626","slug":"d3-path","title":"d3.path","thumbnail":"9d1efe6e54460b34f943257089c9162b60cb4e20e50235f89b15f55968e3d230","access_level":"public","create_time":"$D2022-08-21T14:17:07.665Z","update_time":"$D2022-08-27T06:43:55.323Z","view_time":null,"first_public_time":"$D2022-08-25T06:19:51.921Z","has_unpublished_edits":null,"fork":{"id":"dee7a2a1c6d2a047","slug":"d3-path","title":"d3.path","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":1258,"publish_version":1258,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"d3.path","cells":[{"id":646,"value":"md`# d3.path\n[d3.path](https://github.com/d3/d3-path/blob/master/README.md#path) 返回一个对象，该对象实现与 **Canvas 2D** 上下文相同的路径方法，但将它们序列化为 **SVG** 路径数据。这样，任何由 **“turtle”** 命令组成的程序都可以应用于 **SVG** 和 **画布** 。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"{\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n const points = [\n [20, 20],\n [40, 120],\n [60, 160],\n [350, 50],\n [150, 280],\n [150, 30]\n ],\n labels = [\n \"moveTo\",\n \"lineTo\",\n \"moveTo\",\n \"bezierCurveTo\",\n \"⟨control1⟩\",\n \"⟨control2⟩\"\n ],\n lines = [],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.lineTo(...points[1]);\n path.moveTo(...points[2]);\n path.bezierCurveTo(...points[4], ...points[5], ...points[3]);\n return path\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n“turtle”命令是 **[Canvas 2D context API](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D) 的子集**，特别是 **[CanvasPathMethods](https://www.w3.org/TR/2dcontext/#canvaspathmethods)接口** ，它们移动笔并将其应用于创建路径段（Context.Moveto，Context.Lineto等）。它们不包括 **path** 外观的任何概念；描边、填充、剪辑、颜色和旋转等转换在Canvas中是通过**context.stroke** 等方法处理的，以及SVG中的描边和填充等属性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`**d3.path** 被 D3 的各种可视化渲染方法( **D3-shape**, **D3-geo** 等)内部使用，但也可以直接使用。例如，假设我们有一个用于Canvas 2D上下文的绘图函数\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function draw(context) {\n context.moveTo(10, 10); // move current point to ⟨10,10⟩\n context.lineTo(100, 10); // draw straight line to ⟨100,10⟩\n context.arcTo(150, 150, 300, 10, 40); // draw an arc, the turtle ends up at ⟨194.4,108.5⟩\n context.lineTo(300, 10); // draw straight line to ⟨300,10⟩\n // etc.\n return context; // not mandatory, but will make it easier to chain operations\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"my_wh = {\n return { width: 1152, height: 200 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"function test_my_draw(context) {\n context.moveTo(10, 10); // move current point to ⟨10,10⟩\n context.arc(10, 10, 5, 0, Math.PI * 2);\n context.lineTo(100, 20); // draw straight line to ⟨100,20⟩\n context.arc(100, 20, 5, 0, Math.PI * 2);\n context.lineTo(300, 10); // draw straight line to ⟨300,10⟩\n context.arc(300, 10, 5, 0, Math.PI * 2);\n context.arcTo(150, 150, 800, 80, 40); // draw an arc, 半径 40\n context.arc(150, 150, 5, 0, Math.PI * 2);\n context.moveTo(900, 80);\n context.arc(900, 80, 5, 0, Math.PI * 2);\n // etc.\n return context; // not mandatory, but will make it easier to chain operations\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"## canvas 方式","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"md`我们可以使用2D上下文调用此函数，并将其绘制在画布上：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const context = DOM.context2d(width, 150);\n context.beginPath();\n //draw(context);\n test_my_draw(context);\n context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`\n但我们可以传递相同的函数 **d3.path**而不是 **2D context**，path实例将在内部存储生成的路径。我们可以通过调用 **path.tostring** 来检索作为[SVG path data commands](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands) 的字符串。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"draw(d3.path()).toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"## htl 方式","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"md`\n当将 **path实例** 强制转换为字符串时，将隐式调用toString方法。这意味着我们可以使用与canvas相同的功能轻松创建SVG路径\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"## selection.attr 方式","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"md`同样，我们可以使用 [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) method to 设置 **path** 的 **d** 属性:\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"d3.create(\"svg\")\n .call(svg => svg.append(\"path\")\n .style(\"stroke\", \"black\")\n .style(\"fill\", \"none\")\n .attr(\"d\", draw(d3.path())))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"## 一个 ctx 应用多个函数。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"md`\n**D3.Path实例** 累积了 **turtle** 命令。因此，它可以传递给多个 **drawing functions**（对一个 **实例** ，调用多个画图函数），并在最后一次收集(一次性将图的结果渲染出来)：\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"function square(context) {\n context.rect(10, 10, 140, 140);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"function circle(context) {\n context.moveTo(150, 80);\n context.arc(80, 80, 70, 0, Math.PI * 2);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"quadrature = {\n const p = d3.path();\n square(p);\n circle(p);\n return p.toString(); // the resulting SVG path contains both square and circle\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"## 分图层","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"md`\n相反，这意味着通常情况下应为每个SVG路径创建新的D3。\n相当于分图层\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"## path 文件大小优化。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"md`\nNote: 如果您希望将最终 **path** 作为文件导出，则可能需要通过量化值来最大程度地减少其大小，例如，通过删除乌龟命令中不太明显的数字来说明。例如，使用**string.replace**：\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"d3.path()\n// path 实例","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"draw(d3.path()).toString().replace(/(\\.[0-9])[0-9]+/g, \"$1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"md`\n**d3.path **本质上是[Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D)的逆函数(inverse)，后者接受 SVG路径数据并将其转换为Canvas 2D上下文命令。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"## canvas Path2D api","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":618,"value":"{\n const context = DOM.context2d(width, 150);\n const path = new Path2D(\n \"M10,10L100,10L129.5,92.6A40,40,0,0,0,194.4,108.4L300,10\"\n );\n // 用 svg 的 d 属性文本的方式，创建 canvas\n context.stroke(path);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"md`### [*path*.moveTo(*x*, *y*)](https://github.com/d3/d3-path/blob/master/README.md#path_moveTo)\n\n移至指定的点 ⟨*x*, *y*⟩. As such it does nothing, 但用于定义从哪里开始下一个命令`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"md`### [*path*.closePath()](https://github.com/d3/d3-path/blob/master/README.md#path_closePath)\n\n结束当前子路径，并导致从当前点到当前子路径的初始点绘制一条自动直线。\n\n闭合路径\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`### [*path*.lineTo(*x*, *y*)](https://github.com/d3/d3-path/blob/master/README.md#path_lineTo)\n\n从当前点到指定点⟨*x*, *y*⟩.绘制一条直线。 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"md`\n下面的示例连接了这三个命令: 它创建一个随机遍历(random walk)，将步骤与 *path*.lineTo 连接起来 **lineTo** ，有两个选项\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"viewof walkOptions = Inputs.checkbox(\n new Map([\n [\"Use moveTo every second step\", \"moveTo\"],\n [\"end with closePath\", \"closePath\"]\n ])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":" new Map([\n [\"Use moveTo every second step\", \"moveTo\"],\n [\"end with closePath\", \"closePath\"]\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"{\n const path = d3.path();\n\n const x0 = 200,\n y0 = 200;\n var x = x0,\n y = y0;\n\n path.moveTo(x, y);\n\n for (var i = 0; i < 50; i++) {\n x += 60 * (Math.random() - 0.5);\n y += 60 * (Math.random() - 0.5);\n\n if (i % 2 && walkOptions.includes(\"moveTo\")) path.moveTo(x, y);\n else path.lineTo(x, y);\n\n yield svg``;\n }\n\n if (walkOptions.includes(\"closePath\")) path.closePath();\n\n yield svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`### [*path*.quadraticCurveTo(*cpx*, *cpy*, *x*, *y*)](https://github.com/d3/d3-path/blob/master/README.md#path_quadraticCurveTo)\n\n从当前点到指定点 ⟨*x*, *y*⟩ 绘制一个二次方的贝塞尔曲线（quadratic），具有指定的控制点 ⟨*cpx*, *cpy*⟩`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`### [*path*.bezierCurveTo(*cpx1*, *cpy1*, *cpx2*, *cpy2*, *x*, *y*)](https://github.com/d3/d3-path/blob/master/README.md#path_bezierCurveTo)\n\n使用指定的控制点⟨*cpx1*, *cpy1*⟩和 ⟨*cpx2*, *cpy2*⟩，从当前点绘制一个三次方贝塞尔曲线到指定的点 ⟨*x*, *y*⟩\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"{\n const path = d3.path(),\n x0 = 40,\n y0 = 100,\n cpx1 = 150,\n cpy1 = 280,\n cpx2 = 150,\n cpy2 = 30,\n x = 350,\n y = 50;\n\n path.moveTo(x0, y0);\n path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);\n\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n\n const points = [\n [x0, y0],\n [cpx1, cpy1],\n [cpx2, cpy2],\n [x, y]\n ],\n labels = [\"Start\", \"Control1\", \"Control2\", \"End\"],\n lines = [\n [points[0], points[1]],\n [points[2], points[3]]\n ],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.bezierCurveTo(...points[1], ...points[2], ...points[3]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`### [*path*.arcTo(*x1*, *y1*, *x2*, *y2*, *radius*)](https://github.com/d3/d3-path/blob/master/README.md#path_arcTo)\n\n用指定的**半径 radius**绘制一个圆弧段，它开始于当前点和指定点 ⟨*x1*, *y1*⟩ 之间的直线的切线，结束于指定点⟨*x1*, *y1*⟩ and ⟨*x2*, *y2*⟩ 之间的直线的切线(tangent)。\n\n如果第一个切线不等于当前点，则在当前点和第一个切线之间绘制直线。\n但是，要完成到终点(End)，需要显式调用 *path*.lineTo 必须 be made。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof arcToOptions = Inputs.checkbox(new Map([[\"lineTo ⟨x2, y2⟩\", \"lineTo\"]]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"{\n const path = d3.path(),\n x0 = 40,\n y0 = 100,\n x1 = 150,\n y1 = 280,\n x2 = 350,\n y2 = 20,\n radius = 100;\n\n path.moveTo(x0, y0);\n path.arcTo(x1, y1, x2, y2, radius);\n if (arcToOptions.includes(\"lineTo\")) path.lineTo(x2, y2);\n\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n\n const points = [\n [x0, y0],\n [x1, y1],\n [x2, y2]\n ],\n labels = [\"Start\", \"⟨x1, y1⟩\", \"End\"],\n lines = [\n [points[0], points[1]],\n [points[1], points[2]]\n ],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.arcTo(...points[1], ...points[2], radius);\n if (arcToOptions.includes(\"lineTo\")) path.lineTo(...points[2]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### [*path*.arc(*x*, *y*, *radius*, *startAngle*, *endAngle*[, *anticlockwise*])](https://github.com/d3/d3-path/blob/master/README.md#path_arc)\n\n以指定的圆心 ⟨*x*, *y*⟩ 半径、起始角(**startAngle**) 和结束角(**endAngle**) 绘制圆弧段(circular arc)。\n\nIf *anticlockwise*, a boolean, is true, the arc is drawn in the anticlockwise(逆时针) direction; \n\notherwise, it is drawn in the clockwise(顺时针) direction. \n\n如果当前点不等于弧的起始点，则从当前点到弧的起始点绘制一条直线。\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof arcOptions = Inputs.checkbox(\n new Map([\n [\"moveTo ⟨x0, y0⟩\", \"moveTo\"],\n [\"Anticlockwise\", \"anticlockwise\"]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`### [*path*.rect(*x*, *y*, *w*, *h*)](https://github.com/d3/d3-path/blob/master/README.md#path_rect)\n\n创建一个新的子路径，只包含四个点 ⟨*x*, *y*⟩, ⟨*x* + *w*, *y*⟩, ⟨*x* + *w*, *y* + *h*⟩, ⟨*x*, *y* + *h*⟩ 这四个点用直线连接，然后标记子路径为封闭的。\n\n如果您已经阅读了这一点，那么您不需要详细的示例。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"md`---\n## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`Thanks to [Evan Galloway](https://observablehq.com/@gallowayevan) for the suggestions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"## draggable 使用演示","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1242,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"## update","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1160,"value":"> 用于画text 和 label 以及画辅助线，并更新 path 线条。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1209,"value":"throttledUpdate = throttle(update, delay, { trailing: true, leading: true })\n// trailing 代表节流时间结束后执行代码。\n// leading 代表节流刚开始就执行代码。\n// leading 代表，节流时间内可以执行两次。","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"## draggable 可拖动","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1235,"value":"delay = 110\n// delay 需要大于等于 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"throttle = _.throttle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 45:"$44:body"