Old school D3 from simpler times

All examples By author By category About

jfourmond

Full window Github gist

Propagation Draft v0.1

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    const height = 500;
    const width = 960;
    
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    Promise.all([
      d3.json("nodes.json"),
      d3.json("links.json")
    ]).then((values) => {
      build(values[0], values[1]);
    }).catch((e) => {
      console.error(e);
    });
    
    function build(nodes, links) {
      const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id).strength(0));
//       .force("charge", d3.forceManyBody())
//       .force("center", d3.forceCenter(width / 2, height / 2));

const color = d3.scaleOrdinal(d3.schemeCategory10);
    
    const link = svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
      .selectAll("line")
      .data(links)
      .join("line")
        .attr("stroke-width", d => 0.5).attr("x1", d => d.source.x)
          .attr("y1", d => d.source.y)
          .attr("x2", d => d.target.x)
          .attr("y2", d => d.target.y);
    
    const link_animated = svg.append("g")
    	.attr("fill", "none")
      .attr("stroke", "#ffbc7a")
      .selectAll("line")
      .data(links)
      .join("line")
    		.attr("x1", d => d.source.x)
          .attr("y1", d => d.source.y)
          .attr("x2", d => d.target.x)
          .attr("y2", d => d.target.y)
        .attr("stroke-width", d => d.weight * 2)
    		.attr("stroke-dasharray", function(d, i) {
        		let totalLength = d3.select(this).node().getTotalLength();
        		let dashLength = totalLength / 12;
        		return dashLength + " " + (totalLength + dashLength)
      		})
          .attr("stroke-dashoffset", function(d, i) {
        		let totalLength = d3.select(this).node().getTotalLength();
        		let dashLength = totalLength / 12;
        		return dashLength;
      		})
        	.attr("stroke-linecap", "round");
    
		const node = svg.append("g")
    	.attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
    	.selectAll("circle")
    	.data(nodes)
    	.join("circle")
      	.attr("r", 15)
      	.attr("fill", (d, i) => color(d.layer))
    			.attr("cx", d => d.x)
          .attr("cy", d => d.y);
    
    function animateLink(transition) {
      transition
          .duration(1000).ease(d3.easeLinear)
          .attr("stroke-dashoffset", function(d, i) {
        		let totalLength = d3.select(this).node().getTotalLength();
        		return -(totalLength);
      		}).on('end', function(d1) {
        		d3.select(this).attr("stroke-dashoffset", function(d, i) {
              let totalLength = d3.select(this).node().getTotalLength();
              let dashLength = totalLength / 12;
              return dashLength;
            });
        		link_animated.filter((li) => li.source == d1.target).transition().call(animateLink);
      		});
    }
    
    node.on("click", function (d) {
      link_animated.filter((li) => li.source == d).transition().call(animateLink);
    });
    }
  </script>
</body>

https://d3js.org/d3.v5.min.js