31:T587,html` `32:[] 2f:{"title":"Directional Arrows For SVG Paths","cells":[{"id":0,"value":"md`# Directional Arrows For SVG Paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof arrowCount = slider({\n title: \"Arrow Count\",\n min: 1,\n max: 40,\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"updateSvg(arrowCount)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function updateSvg(ac) {\n var data = d3.range(ac);\n var arrows = d3\n .select(\"svg\")\n .selectAll(\"use\")\n .data(data);\n arrows\n .enter()\n .append(\"use\")\n .attr(\"xlink:href\", \"#arrow\")\n .each(draw);\n arrows.each(draw);\n arrows.exit().remove();\n return data + \" -> arrows drawn!\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"function draw(d, i) {\n var path = document.getElementById(\"loop\");\n var length = path.getTotalLength();\n var l = (length * i) / arrowCount,\n angle = angleAtLength(l, path),\n point = pointAtLength(l, path);\n\n point[0] = point[0] + 6 * Math.cos(angle - Math.PI / 2);\n point[1] = point[1] + 6 * Math.sin(angle - Math.PI / 2);\n d3.select(this).attr(\n \"transform\",\n \"translate(\" + point + \") rotate(\" + (angle * 180) / Math.PI + \")\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"function pointAtLength(l, path) {\n var xy = path.getPointAtLength(l, path);\n return [xy.x, xy.y];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"function angleAtLength(l, path) {\n var a = pointAtLength(Math.max(l - 0.01, 0), path), // this could be slightly negative\n b = pointAtLength(l + 0.01, path); // browsers cap at total length\n\n return Math.atan2(b[1] - a[1], b[0] - a[0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import { slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`### References\nhttp://bl.ocks.org/veltman/7664840c2908478123304ba6281a5364`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}