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

Question

I am building d3.js sankey diagram and following this example https://bl.ocks.org/emeeks/e9d64d27f286e61493c9 . I am fairly new to React (2 days) and I am trying to build this visualization d3.js and React. The dragmove function works fine but throws me an error Dragmove function

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());
}

error

Line 90:   Unexpected string concatenation of literals

While for generating particles my particles remains empty even after setting the timer and gives empty arrays.

This is the code for generating particles--

    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();
    }
  }

This is the link to my project: https://codesandbox.io/s/github/kuhu12/react-d3

Answer 1

You concatenation error is due to unnecessary use of concatenation eslint

you can replace

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

with

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

Or even better use the new template literals for all your string concatenation

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

See more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals