31:T65f,{ svgE; const d3SvgNode = d3.select(svg``); const sourceData = { x: width / 2 - 100, y: 50, r: 10 }; const targetData = { x: width / 2 + 100, y: 200, r: 10 }; const drag = d3.drag().on("drag", dragged); const link = d3SvgNode .selectAll("path") .data([...Array(linksCount).keys()]) .enter() .append("path") .attr("d", (d) => linkGroupArc({ source: sourceData, target: targetData, lineIndex: d, count: linksCount }) ) .attr("marker-mid", "url(#arrow)") .attr("marker-end", "url(#arrow)") .attr("marker-start", "url(#arrow)") .attr("fill", "none") .attr("stroke", "steelblue"); const source = d3SvgNode .append("circle") .datum(sourceData) .attr("r", 3) .attr("cx", sourceData.x) .attr("cy", sourceData.y) .attr("fill", "steelblue") .attr("cursor", "move") .call(drag); const target = d3SvgNode .append("circle") .datum(targetData) .attr("r", 3) .attr("cx", targetData.x) .attr("cy", targetData.y) .attr("fill", "steelblue") .attr("cursor", "move") .call(drag); function dragged(d) { d.x = d3.event.x; d.y = d3.event.y; update(); } function update() { source.attr("cx", sourceData.x).attr("cy", sourceData.y); target.attr("cx", targetData.x).attr("cy", targetData.y); link.attr("d", (d) => linkGroupArc({ source: sourceData, target: targetData, count: linksCount, lineIndex: d }) ); } yield d3SvgNode.node(); }32:Td02,function linkGroupArc({ source, target, count, lineIndex }) { if (source == target) { var x = source.x; var y = source.y; var r = source.r - intervalPadding + 10; var alpha = Math.PI / 3; if (lineIndex) { alpha -= 0.1 * lineIndex; } var dx = Math.cos(alpha) * r; var dy = Math.sin(alpha) * r; var dx1 = x - dx; var dx2 = x + dx; var dy1 = y - dy; var dy2 = y - dy; var dr = (20 * 10) / r; if (lineIndex) { dr += 5 * lineIndex; } return `M ${dx1}, ${dy1} A ${dr}, ${dr} 0 1 1 ${dx2}, ${dy2}`; } var x1 = source.x; var y1 = source.y; var r1 = source.r - intervalPadding + 10; var x2 = target.x; var y2 = target.y; var r2 = target.r - intervalPadding + 10; var dx = x2 - x1; var dy = y2 - y1; var dr = Math.sqrt(dx * dx + dy * dy); /** Control point */ var mx = x1 + dx / 2; var my = y1 + dy / 2; var d = (50 * dr) / 500; var inc = (50 * dr) / 500; if (lineIndex) { d += inc * Math.floor((lineIndex + 1) / 2); } else { d += inc * Math.round((lineIndex + 1) / 2); if (count % 2) { d = 1; } else { d = -inc * Math.round((lineIndex + 1) / 2); } } if ((!dx && lineIndex % 2) || (!dy && (lineIndex + 1) % 2)) { d = -d; } mutable debug = { dx, dy, d }; var cx = 0; var cy = 0; var b = 0; var m = dy / dx; if (dx == 0) { cx = mx + d; cy = my; } else if (dy == 0) { cx = mx; cy = my - d; } else { if (lineIndex % 2) { cx = mx + Math.sqrt(Math.pow(d, 2) / (1 + 1 / Math.pow(m, 2))); } else { cx = mx - Math.sqrt(Math.pow(d, 2) / (1 + 1 / Math.pow(m, 2))); } /* if (x1 > x2) { cx = mx + Math.sqrt(Math.pow(d, 2) / (1 + 1 / Math.pow(m, 2))); } else { cx = mx - Math.sqrt(Math.pow(d, 2) / (1 + 1 / Math.pow(m, 2))); } */ b = my - (-1 / m) * mx; cy = (-1 / m) * cx + b; } var m1 = (cy - y1) / (cx - x1); var d1 = y1 - m1 * x1; var sita1 = Math.pow(r1, 2) * (1 + Math.pow(m1, 2)) - Math.pow(y1 - m1 * x1 - d1, 2); var x11 = (x1 + y1 * m1 - d1 * m1 + Math.sqrt(sita1)) / (1 + Math.pow(m1, 2)); var y11 = (d1 + x1 * m1 + y1 * Math.pow(m1, 2) + m1 * Math.sqrt(sita1)) / (1 + Math.pow(m1, 2)); if (!((x11 > cx && x11 < x1) || (x11 > x1 && x11 < cx))) { x11 = (x1 + y1 * m1 - d1 * m1 - Math.sqrt(sita1)) / (1 + Math.pow(m1, 2)); y11 = (d1 + x1 * m1 + y1 * Math.pow(m1, 2) - m1 * Math.sqrt(sita1)) / (1 + Math.pow(m1, 2)); } var m2 = (y2 - cy) / (x2 - cx); var d2 = y2 - m2 * x2; var sita2 = Math.pow(r2, 2) * (1 + Math.pow(m2, 2)) - Math.pow(y2 - m2 * x2 - d2, 2); var x22 = (x2 + y2 * m2 - d2 * m2 - Math.sqrt(sita2)) / (1 + Math.pow(m2, 2)); var y22 = (d2 + x2 * m2 + y2 * Math.pow(m2, 2) - m2 * Math.sqrt(sita2)) / (1 + Math.pow(m2, 2)); if (!((x22 > cx && x22 < x2) || (x22 > cx && x22 < x2))) { x22 = (x2 + y2 * m2 - d2 * m2 + Math.sqrt(sita2)) / (1 + Math.pow(m2, 2)); y22 = (d2 + x2 * m2 + y2 * Math.pow(m2, 2) + m2 * Math.sqrt(sita2)) / (1 + Math.pow(m2, 2)); } if (isNaN(x11)) x11 = 0; if (isNaN(y11)) y11 = 0; if (isNaN(cx)) cx = 0; if (isNaN(cy)) cy = 0; if (isNaN(x22)) x22 = 0; if (isNaN(y22)) y22 = 0; return `M ${x11} , ${y11} Q ${cx}, ${cy} ${x22}, ${y22}`; }33:[] 2f:{"title":"Network Chart, Multiple Links, with shader arrows","cells":[{"id":0,"value":"md`# Network Chart, Multiple Links, with shader arrows`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`Multiple links for network graphs.\n\nDrag points to see several scenarios`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof linksCount = Inputs.range([0, 21], {\n value: 5,\n step: 1,\n label: \"Links Count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"viewof arrowTransformY = Inputs.range([-20, 20], {\n value: 5,\n step: 1,\n label: \"Arrow Y\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"[...Array(linksCount).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"svgE = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"intervalPadding = 22","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"mutable debug = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}