D3.js 带粒子的桑基图答案

【问题标题】：D3.js Sankey diagram with particlesD3.js 带粒子的桑基图
【发布时间】：2017-09-21 14:54:12
【问题描述】：

我一直在使用 d3 Javascript 库试验 sankey 图。我最近在 bl.ocks 上看到了一个非常漂亮的 sankey 图。

https://bl.ocks.org/micahstubbs/ae0946f9efe18fc4f67460e7387abc0b

在将其应用于我自己的 sankey 图表之前，我尝试的第一件事是复制 bl.ocks 页面上的所有代码并在我自己的代码编辑器 (Dreamweaver) 中进行尝试。问题是每当我尝试加载 sankey 时，都会出现以下控制台错误：

SyntaxError: missing = in const declaration

我真的不明白这里发生了什么，因为它在 bl.ocks 页面上似乎工作得很好。应该是以下代码：

for (const x in particles) {
  if ({}.hasOwnProperty.call(particles, x)) {
    const currentTime = elapsed - particles[x].time;
    // var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
    particles[x].current = currentTime * 0.15 * particles[x].speed;
    const currentPos = particles[x].path.getPointAtLength(particles[x].current);
    context.beginPath();
    context.fillStyle = particles[x].link.particleColor(0);
    context.arc(currentPos.x, currentPos.y + particles[x].offset, particles[x].link.particleSize, 0, 2 * Math.PI);
    context.fill();
  }
}

它位于 vis.js 代码的底部。任何人都可以帮助我让这段代码正常工作吗？我喜欢视觉效果，并想学习使用它。谢谢你。

【问题讨论】：

标签： javascript d3.js syntax-error constants sankey-diagram

【解决方案1】：

来自 MDN：常量是程序在正常执行期间无法更改的值。它不能通过重新分配来改变，也不能重新声明。在 JavaScript 中，常量是使用 const 关键字声明的。需要一个常量的初始化器；也就是说，您必须在声明它的同一语句中指定它的值（这是有道理的，因为它以后不能更改）。

您的数据（能量）可能未正确加载。除非您发布整个代码，否则我无法告诉您出了什么问题。但是我结合了下面 bl.ocks.org 中的图表代码。它也适用于 codepen。

<html lang='en'>

<head>
  <meta charset='utf-8' />
  <title>Sankey Particles</title>
  <style>
    .node rect {
      cursor: move;
      fill-opacity: .9;
      shape-rendering: crispEdges;
    }
    
    .node text {
      pointer-events: none;
      text-shadow: 0 1px 0 #fff;
    }
    
    .link {
      fill: none;
      stroke: #000;
      stroke-opacity: .15;
    }
    
    .link:hover {
      stroke-opacity: .25;
    }
    
    svg {
      position: absolute;
    }
    
    canvas {
      position: absolute;
    }
  </style>
</head>

<body>
  <canvas width='960' height='960'></canvas>
  <svg width='960' height='960'></svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js' charset='utf-8' type='text/javascript'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.4.2/d3-sankey.js' charset='utf-8' type='text/javascript'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-timer/1.0.5/d3-timer.js' charset='utf-8' type='text/javascript'></script>
  <script src='vis.js'></script>
  <script>
    const margin = { top: 1, right: 1, bottom: 6, left: 1 };
    const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;
    const formatNumber = d3.format(",.0f");
    const format = d => `${formatNumber(d)} TWh`;
    const color = d3.scaleOrdinal(d3.schemeCategory20);
    
    const svg = d3
      .select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`);
    
    const sankey = d3.sankey().nodeWidth(15).nodePadding(10).size([width, height]);
    
    const path = sankey.link();
    
    const freqCounter = 1;
    
    var energy = {
      nodes: [
        { name: "Agricultural 'waste'" },
        { name: "Bio-conversion" },
        { name: "Liquid" },
        { name: "Losses" },
        { name: "Solid" },
        { name: "Gas" },
        { name: "Biofuel imports" },
        { name: "Biomass imports" },
        { name: "Coal imports" },
        { name: "Coal" },
        { name: "Coal reserves" },
        { name: "District heating" },
        { name: "Industry" },
        { name: "Heating and cooling - commercial" },
        { name: "Heating and cooling - homes" },
        { name: "Electricity grid" },
        { name: "Over generation / exports" },
        { name: "H2 conversion" },
        { name: "Road transport" },
        { name: "Agriculture" },
        { name: "Rail transport" },
        { name: "Lighting & appliances - commercial" },
        { name: "Lighting & appliances - homes" },
        { name: "Gas imports" },
        { name: "Ngas" },
        { name: "Gas reserves" },
        { name: "Thermal generation" },
        { name: "Geothermal" },
        { name: "H2" },
        { name: "Hydro" },
        { name: "International shipping" },
        { name: "Domestic aviation" },
        { name: "International aviation" },
        { name: "National navigation" },
        { name: "Marine algae" },
        { name: "Nuclear" },
        { name: "Oil imports" },
        { name: "Oil" },
        { name: "Oil reserves" },
        { name: "Other waste" },
        { name: "Pumped heat" },
        { name: "Solar PV" },
        { name: "Solar Thermal" },
        { name: "Solar" },
        { name: "Tidal" },
        { name: "UK land based bioenergy" },
        { name: "Wave" },
        { name: "Wind" }
      ],
      links: [
        { source: 0, target: 1, value: 124.729 },
        { source: 1, target: 2, value: 0.597 },
        { source: 1, target: 3, value: 26.862 },
        { source: 1, target: 4, value: 280.322 },
        { source: 1, target: 5, value: 81.144 },
        { source: 6, target: 2, value: 35 },
        { source: 7, target: 4, value: 35 },
        { source: 8, target: 9, value: 11.606 },
        { source: 10, target: 9, value: 63.965 },
        { source: 9, target: 4, value: 75.571 },
        { source: 11, target: 12, value: 10.639 },
        { source: 11, target: 13, value: 22.505 },
        { source: 11, target: 14, value: 46.184 },
        { source: 15, target: 16, value: 104.453 },
        { source: 15, target: 14, value: 113.726 },
        { source: 15, target: 17, value: 27.14 },
        { source: 15, target: 12, value: 342.165 },
        { source: 15, target: 18, value: 37.797 },
        { source: 15, target: 19, value: 4.412 },
        { source: 15, target: 13, value: 40.858 },
        { source: 15, target: 3, value: 56.691 },
        { source: 15, target: 20, value: 7.863 },
        { source: 15, target: 21, value: 90.008 },
        { source: 15, target: 22, value: 93.494 },
        { source: 23, target: 24, value: 40.719 },
        { source: 25, target: 24, value: 82.233 },
        { source: 5, target: 13, value: 0.129 },
        { source: 5, target: 3, value: 1.401 },
        { source: 5, target: 26, value: 151.891 },
        { source: 5, target: 19, value: 2.096 },
        { source: 5, target: 12, value: 48.58 },
        { source: 27, target: 15, value: 7.013 },
        { source: 17, target: 28, value: 20.897 },
        { source: 17, target: 3, value: 6.242 },
        { source: 28, target: 18, value: 20.897 },
        { source: 29, target: 15, value: 6.995 },
        { source: 2, target: 12, value: 121.066 },
        { source: 2, target: 30, value: 128.69 },
        { source: 2, target: 18, value: 135.835 },
        { source: 2, target: 31, value: 14.458 },
        { source: 2, target: 32, value: 206.267 },
        { source: 2, target: 19, value: 3.64 },
        { source: 2, target: 33, value: 33.218 },
        { source: 2, target: 20, value: 4.413 },
        { source: 34, target: 1, value: 4.375 },
        { source: 24, target: 5, value: 122.952 },
        { source: 35, target: 26, value: 839.978 },
        { source: 36, target: 37, value: 504.287 },
        { source: 38, target: 37, value: 107.703 },
        { source: 37, target: 2, value: 611.99 },
        { source: 39, target: 4, value: 56.587 },
        { source: 39, target: 1, value: 77.81 },
        { source: 40, target: 14, value: 193.026 },
        { source: 40, target: 13, value: 70.672 },
        { source: 41, target: 15, value: 59.901 },
        { source: 42, target: 14, value: 19.263 },
        { source: 43, target: 42, value: 19.263 },
        { source: 43, target: 41, value: 59.901 },
        { source: 4, target: 19, value: 0.882 },
        { source: 4, target: 26, value: 400.12 },
        { source: 4, target: 12, value: 46.477 },
        { source: 26, target: 15, value: 525.531 },
        { source: 26, target: 3, value: 787.129 },
        { source: 26, target: 11, value: 79.329 },
        { source: 44, target: 15, value: 9.452 },
        { source: 45, target: 1, value: 182.01 },
        { source: 46, target: 15, value: 19.013 },
        { source: 47, target: 15, value: 289.366 }
      ]
    };
    
    sankey.nodes(energy.nodes).links(energy.links).layout(32);
    
    const link = svg
      .append("g")
      .selectAll(".link")
      .data(energy.links)
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", d => Math.max(1, d.dy))
      .sort((a, b) => b.dy - a.dy);
    
    link
      .append("title")
      .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
    
    const node = svg
      .append("g")
      .selectAll(".node")
      .data(energy.nodes)
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", d => `translate(${d.x},${d.y})`)
      .call(
        d3
          .drag()
          .subject(d => d)
          .on("start", function() {
            this.parentNode.appendChild(this);
          })
          .on("drag", dragmove)
      );
    
    node
      .append("rect")
      .attr("height", d => d.dy)
      .attr("width", sankey.nodeWidth())
      .style("fill", d => {
        d.color = color(d.name.replace(/ .*/, ""));
        return d.color;
      })
      .style("stroke", "none")
      .append("title")
      .text(d => `${d.name}\n${format(d.value)}`);
    
    node
      .append("text")
      .attr("x", -6)
      .attr("y", d => d.dy / 2)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(d => d.name)
      .filter(d => d.x < width / 2)
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");
    
    function dragmove(d) {
      d3
        .select(this)
        .attr(
          "transform",
          `translate(${d.x},${(d.y = Math.max(
            0,
            Math.min(height - d.dy, d3.event.y)
          ))})`
        );
      sankey.relayout();
      link.attr("d", path);
    }
    
    const linkExtent = d3.extent(energy.links, d => d.value);
    const frequencyScale = d3.scaleLinear().domain(linkExtent).range([0.05, 1]);
    const particleSize = d3.scaleLinear().domain(linkExtent).range([1, 5]);
    
    energy.links.forEach(link => {
      link.freq = frequencyScale(link.value);
      link.particleSize = 2;
      link.particleColor = d3
        .scaleLinear()
        .domain([0, 1])
        .range([link.source.color, link.target.color]);
    });
    
    const t = d3.timer(tick, 1000);
    let particles = [];
    
    function tick(elapsed, time) {
      particles = particles.filter(d => d.current < d.path.getTotalLength());
    
      d3.selectAll("path.link").each(function(d) {
        // if (d.freq < 1) {
        for (let x = 0; x < 2; x += 1) {
          const offset = (Math.random() - 0.5) * (d.dy - 4);
          if (Math.random() < d.freq) {
            const length = this.getTotalLength();
            particles.push({
              link: d,
              time: elapsed,
              offset,
              path: this,
              length,
              animateTime: length,
              speed: 0.5 + Math.random()
            });
          }
        }
        // }
        /*    
                else {
                  for (var x = 0; x<d.freq; x++) {
                    var offset = (Math.random() - .5) * d.dy;
                    particles.push({link: d, time: elapsed, offset: offset, path: this})
                  }
                } 
            */
      });
    
      particleEdgeCanvasPath(elapsed);
    }
    
    function particleEdgeCanvasPath(elapsed) {
      const context = d3.select("canvas").node().getContext("2d");
    
      context.clearRect(0, 0, 1000, 1000);
    
      context.fillStyle = "gray";
      context.lineWidth = "1px";
      for (const x in particles) {
        if ({}.hasOwnProperty.call(particles, x)) {
          const currentTime = elapsed - particles[x].time;
          // var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
          particles[x].current = currentTime * 0.15 * particles[x].speed;
          const currentPos = particles[x].path.getPointAtLength(
            particles[x].current
          );
          context.beginPath();
          context.fillStyle = particles[x].link.particleColor(0);
          context.arc(
            currentPos.x,
            currentPos.y + particles[x].offset,
            particles[x].link.particleSize,
            0,
            2 * Math.PI
          );
          context.fill();
        }
      }
    }
  </script>
</body>

</html>

【讨论】：

谢谢。由于某种原因，它现在似乎确实有效。欣赏它。