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/zh-CN/docs/Web/JavaScript/Reference/Template_literals