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类） - ＆gt;图表，图表标题 - ＆gt;图表，图表标题 - ＆gt;图表。

SingleChartsDOM只返回一些反应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);
  }
}

将d3图表与reactjs

1 个答案: