javascript - 将 d3 图表与 reactjs 集成

Question

我想使用 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;
}

所以我基本上想要图表标题(SingleChartsDOM 类)-> 图表、图表标题-> 图表、图表标题-> 图表。

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，然后再执行追加。

我如何集成它？

Answer 1

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