D3 Examples - Propagation Draft v0.1

xxxxxxxxxx
 
<!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>
​
    