Agfdhyk

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

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