2f:null 30:["$","title",null,{"children":"Network Chart, Multiple Links, with shader arrows | David B. | Observable"}] 35: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(); }36: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}`; }37:[] 33:{"id":"034ed6065c8a0438","slug":"network-chart-multiple-links-with-shader-arrows","title":"Network Chart, Multiple Links, with shader arrows","thumbnail":"a199002c525ec4036983c105eee338f588314f485cf6049f94668c19cdc28147","access_level":"public","create_time":"$D2021-07-12T09:49:37.008Z","update_time":"$D2021-09-03T11:53:07.709Z","view_time":null,"first_public_time":"$D2021-07-26T19:45:48.619Z","has_unpublished_edits":null,"fork":{"id":"ea708d33bc91dc24","slug":"curved-edges","title":"Curved Edges Vertical (d3 v3,v4,v5,v6, v7)","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":1,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":420,"publish_version":420,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"beac97df7de1954a","slug":"work-components","title":"Work Utils","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`Multiple links for network graphs.\n\nDrag points to see several scenarios`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"[...Array(linksCount).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"svgE = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"intervalPadding = 22","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"mutable debug = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"