d3.js v4 sankey图 - 粒子和拖动不起作用

Question

我正在构建d3.js sankey图并遵循此示例https://bl.ocks.org/emeeks/e9d64d27f286e61493c9。我是React的新手（2天），我正在尝试构建这个可视化d3.js和React。 dragmove函数工作正常，但抛出一个错误Dragmove函数

function dragmove(d) {

  var rectY = d3.select(this).select("rect").attr("y");

  d.y0 = d.y0 + d3.event.dy;

  var yTranslate = d.y0 - rectY;
  console.log(yTranslate)

  d3.select(this).attr("transform", 
            "translate(0" + "," + (yTranslate) + ")");

  sankey.update(graph);
  link.attr("d", D3sankey.sankeyLinkHorizontal());
}

错误

Line 90:   Unexpected string concatenation of literals

在生成粒子时，即使在设置计时器后，我的粒子仍然是空的，并给出空阵列。

这是生成粒子的代码 -

    var linkExtent = d3.extent(Data.links, function (d) {return d.o_value});
  var frequencyScale = d3.scaleLinear().domain(linkExtent).range([0.05,1]);
  var particleSize = d3.scaleLinear().domain(linkExtent).range([1,5]);


  Data.links.forEach(function (link) {
    link.freq = frequencyScale(link.o_value);
    link.particleSize = 2;
    link.particleColor = d3.scaleLinear().domain([0,1])
    .range([link.source.color, link.target.color]);
  })

  var t = d3.timer(tick, 1000);
  var particles = [];

  function tick(elapsed, time) {
    particles = particles.filter(function (d) {return d.current < d.path.getTotalLength()});

    d3.selectAll("path.link")
    .each(
      function (d) {
//        if (d.freq < 1) {
        for (var x = 0;x<2;x++) {
          var offset = (Math.random() - .5) * (d.dy - 4);
          if (Math.random() < d.freq) {
            var length = this.getTotalLength();
            particles.push({link: d, time: elapsed, offset: offset, path: this, length: 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) {
    var context = d3.select("canvas").node().getContext("2d")

    context.clearRect(0,0,1000,1000);

      context.fillStyle = "gray";
      context.lineWidth = "1px";
    for (var x in particles) {
        var currentTime = elapsed - particles[x].time;
//        var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
        particles[x].current = currentTime * 0.15 * particles[x].speed;
        var 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();
    }
  }

这是我项目的链接：https://codesandbox.io/s/github/kuhu12/react-d3

Answer 1

你连接错误是由于不必要使用串联eslint

你可以替换

d3.select(this).attr("transform", "translate(0" + "," + (yTranslate) + ")");

同

d3.select(this).attr("transform", "translate(0," + (yTranslate) + ")");

或者甚至更好地将新模板文字用于所有字符串连接

d3.select(this).attr("transform", `translate(0,${yTranslate})`);

在这里查看更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals