| license: gpl-3.0 |
Forked from Pratap Vardhan's block.
Make link paths wavy for randomly-generated network.
wavefunction creates a wavy-like path between source and target link, using coordinate transforamtions.
I just updated the wave function so that the step variable is dependent upon the distance between nodes, so the link looks like a spring.
forked from HarryStevens's block: Force with Springy Links
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| .links path { | |
| fill: none; | |
| stroke: #999; | |
| stroke-opacity: 0.6; | |
| } | |
| .nodes circle { | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/d3-marcon/build/d3-marcon.min.js"></script> | |
| <script> | |
| var nodes = d3.range(100).map(function(i) { | |
| return { index: i } | |
| }); | |
| var links = d3.range(nodes.length - 1).map(function(i) { | |
| return { source: Math.floor(Math.sqrt(i)), target: i + 1} | |
| }); | |
| var graph = {nodes: nodes, links: links}; | |
| var m = d3.marcon().width(window.innerWidth).height(window.innerHeight); | |
| m.render(); | |
| var width = m.innerWidth(), | |
| height = m.innerHeight(), | |
| svg = m.svg(); | |
| var color = d3.scaleOrdinal(d3.schemeCategory20); | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().distance(50).strength(1)) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| var link = svg.append("g") | |
| .attr("class", "links") | |
| .selectAll("path") | |
| .data(graph.links) | |
| .enter().append("path") | |
| var node = svg.append("g") | |
| .attr("class", "nodes") | |
| .selectAll("circle") | |
| .data(graph.nodes) | |
| .enter().append("circle") | |
| .attr("r", function(d) { return 4 + 6*Math.random(); }) | |
| .attr("fill", function(d) { return color(Math.floor(Math.sqrt(d.index))); }) | |
| .call(d3.drag() | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| simulation | |
| .nodes(graph.nodes) | |
| .on("tick", ticked); | |
| simulation.force("link") | |
| .links(graph.links); | |
| function ticked() { | |
| link.attr("d", wave); | |
| node | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| } | |
| // Create wavy path between source and target | |
| function wave(d) { | |
| var p1 = d.source | |
| p2 = d.target, | |
| amp = 2, | |
| dist = Math.hypot(p2.y - p1.y, p2.x - p1.x), | |
| step = dist / 120, | |
| cpi = step * Math.PI, | |
| angle = Math.atan2(p2.y - p1.y, p2.x - p1.x), | |
| ca = Math.cos(angle), | |
| sa = Math.sin(angle), | |
| arr = []; | |
| for (x = 0; x <= dist; x += step){ | |
| var y = amp * Math.sin(x / cpi), | |
| x2 = p1.x + x * ca - y * sa, | |
| y2 = p1.y + x * sa + y * ca; | |
| arr.push({x: x2, y: y2}) | |
| } | |
| var line = d3.line() | |
| .x(function(d) { return d.x; }) | |
| .y(function(d) { return d.y; }) | |
| return line(arr); | |
| } | |
| function dragstarted(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d.fx = d.x; | |
| d.fy = d.y; | |
| } | |
| function dragged(d) { | |
| d.fx = d3.event.x; | |
| d.fy = d3.event.y; | |
| } | |
| function dragended(d) { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d.fx = null; | |
| d.fy = null; | |
| } | |
| </script> | |
| </body> | |
| </html> |
