将d3图表与reactjs集成

Integrating d3 chart with reactjs

本文关键字：reactjs 集成 d3      更新时间：2023-09-26

我想使用d3库创建三个图表-每个都有自己的html。所以我想达到这样的效果:

render: function () {
   var elements = [];
   for (var i in response) { // getting chart data from some API response
      elements.push(React.createElement(SingleChartsDOM, {data: response[i]});
      createSingleChart(response[i]);
   }
   return elements;
}

我想要chart header (SingleChartsDOM类)-> chart, chart header -> chart, chart header -> chart。

SingleChartsDOM只返回一些react dom，它工作正常。CreateSingleChart()函数为d3函数:

createSingleChart: function (dataset) {
        var container = 'dashboardContent';
        var data = [];
        data = dataset.statistics;
        var margin = {top: 20, right: 0, bottom: 30, left: 60},
        ww = document.getElementById(container).clientWidth - 40,
                width = ww - margin.left - margin.right,
                height = 200 - margin.top - margin.bottom;
        var svg = d3.select('#' + container).append("div").attr("class", "chart").append("svg")
                .data(data)
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        x.domain(data.map(function (d) {
            return d.date.slice(5, 10);
        }));
        y.domain([0, d3.max(data, function (d) {
                return d.volume;
            })]);
        svg.append("g")
                .attr("class", "x axis")
                .call(xAxis);
        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .style("text-anchor", "end")
                .text("Volume");
        svg.selectAll(".bar")
                .data(data)
                .enter().append("rect")
                .attr("height", function (d) {
                    return height - y(d.volume);
                });
        function type(d) {
            d.volume = +d.volume;
            return d;
        }
}

问题是我所有的html都是先创建的，图表是最后创建的。所以我猜我的追加并没有发生在循环中，而是html首先呈现，追加在那之后执行。

如何积分?

D3不能这样使用。要么使用recharts之类的声明性图表，要么必须使用componentDidMount，如下所示:

render() {
  return response.map(this.renderChart);
}
renderChart(data, index) {
  return (
    <div className="chartContainer" ref={"container-" + index}>
      <SingleChartsDOM data={data} />
    </div>
  );
}
componentDidMount() {
  for (var index in response) {
    var container, data;
    container = this.refs["container-" + index];
    data = response[index];
    createSingleChart(data, container);
  }
}
相关文章：