31:T734,{ // define points let points = d3.range(0, 1.1, 0.1) .map(d => { return [ d, Math.pow(d, 3) ] }) let x = d3.scaleLinear().domain([0, 1]).range([0, width]) let y = d3.scaleLinear().domain([0, 1]).range([200, 0]) let line = d3.line().x(d => x(d[0])).y(d => y(d[1])).curve(d3.curveNatural) let svg = d3.select(DOM.svg(width, 200)) let curve = svg .append('path') .attr('stroke', 'black') .attr('fill', 'transparent') .attr('d', line(points)) let tmp = d3.pathLayout() .path(curve.attr('d')) .nodes([{}, {}, {}, {}]) console.log(tmp.nodes()) // let ps = svg.selectAll('circle') // .data(tmp.nodes().slice(1)) // .enter() // .append('circle') // .attr('cx', d => d.x) // .attr('cy', d => d.y) // .attr('r', 3) // .attr('fill', 'red') // // .call(d3.drag() // // .on('drag', function () { // // let circle = d3.select(this) // // circle // // .attr('cx', d => d[0] = d3.event.x) // // .attr('cy', d => d[1] = d3.event.y) // // curve.attr('d', line(points)) // // })) let ps = svg.selectAll('circle') .data(points) .enter() .append('circle') .attr('cx', d => x(d[0])) .attr('cy', d => y(d[1])) .attr('r', 3) .attr('fill', 'red') .call(d3.drag() .on('drag', function () { let circle = d3.select(this) circle .attr('cx', d => { d[0] = x.invert(d3.event.x) return d3.event.x }) .attr('cy', d => { d[1] = y.invert(d3.event.y) return d3.event.y }) curve.attr('d', line(points)) })) return svg.node() }32:[] 2f:{"title":"move curve using control points","cells":[{"id":0,"value":"md`# move curve using control points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`Draw tangent lines and control points for curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`let's update quadratic curve using the **control points**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`*drag circles to change the curve*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n // define points\n let points = [[10, 80], [95, 10], [180, 80]]\n let line = (points) => `M${points[0][0]},${points[0][1]}Q${points[1][0]},${points[1][1]},${points[2][0]},${points[2][1]}`\n \n let svg = d3.select(DOM.svg(width, 200))\n \n let curve = svg\n .append('path')\n .attr('stroke', 'black')\n .attr('fill', 'transparent')\n .attr('d', d => line(points))\n \n let ps = svg.selectAll('circle')\n .data(points)\n .enter()\n .append('circle')\n .attr('cx', d => d[0])\n .attr('cy', d => d[1])\n .attr('r', 3)\n .attr('fill', 'red')\n .call(d3.drag()\n .on('drag', function () {\n let circle = d3.select(this)\n circle\n .attr('cx', d => d[0] = d3.event.x)\n .attr('cy', d => d[1] = d3.event.y)\n \n curve.attr('d', line(points))\n }))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`4 poins, bazier curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`*drag circles to change the curve*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"{\n // define points\n let points = [[10, 80], [45, 10], [250, 20], [180, 80]]\n let line = (points) => `M${points[0][0]},${points[0][1]}C${points[1][0]},${points[1][1]},${points[2][0]},${points[2][1]},${points[3][0]},${points[3][1]}`\n \n let svg = d3.select(DOM.svg(width, 200))\n \n let curve = svg\n .append('path')\n .attr('stroke', 'black')\n .attr('fill', 'transparent')\n .attr('d', d => line(points))\n \n let ps = svg.selectAll('circle')\n .data(points)\n .enter()\n .append('circle')\n .attr('cx', d => d[0])\n .attr('cy', d => d[1])\n .attr('r', 3)\n .attr('fill', 'red')\n .call(d3.drag()\n .on('drag', function () {\n let circle = d3.select(this)\n circle\n .attr('cx', d => d[0] = d3.event.x)\n .attr('cy', d => d[1] = d3.event.y)\n \n curve.attr('d', line(points))\n }))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"d3 = require('d3', 'd3-pathLayout')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}