将数据传递到React中的D3

Question

我对D3相当陌生，我正在尝试修改一些示例代码。我正在将这段代码转换为React。对于这段代码，我试图弄清楚如何将“数据”作为道具传递，而不是转换CSV文件。简要描述代码中正在发生的事情也将非常有帮助。这是我正在使用的代码：

d3.csv("phage-history.csv", function (error, data) {


      svgEnter = svg.selectAll("rect")
      .data(data)
      .enter();

      svgEnter.append("rect")
      .attr("rx", 25)
      .attr("x", function (d) {
        x = xScale(new Date(d.start));
        return x;
      })
      .attr("y", function(d, i) { return 400 - (d.count*30); })
      .attr("width", 25)
      .attr("height", 25)
      .attr("fill", "green")
      .attr("stroke-width", "1px")
      .attr("stroke", "black")
      .on("mouseover", function (d) {
        rect = d3.select(this);
        rect.transition()
        .duration(500)
        .attr("y", function(d, i) { 
          console.log(this);
          var x = rect.x;
          return 20; })
        .transition()
        .duration(500)
        .attr("rx", 2)
        .attr("width", 300)
        .attr("height", 100)
          .attr("fill", "skyblue");

            tooltip.html(d.authors + "<br>" + d.description);
        tooltip
          .style("top", 30)
          .style("left",function () {
          console.log("x", x);
          return d3.event.pageX;
        })
            setTimeout(function () { 
          tooltip.style("visibility", "visible");
        }, 1500);
      })
        .on("mouseout", function (d) {
        d3.select(this)
        .transition()
        .duration(500)
        .attr("rx", 25)
        .attr("width", 25)
        .attr("height", 25)
        .transition()
        .duration(500)
        .delay(500)
        .attr("y", function(d, i) { return 400 - (d.count*30); })
        .attr("fill", "green");
            //tooltip.text(d.authors);
        return tooltip.style("visibility", "hidden");

      });
    });