reactjsとd3チャートの統合

Question

それぞれ独自のhtmlを持つd3ライブラリを使用して3つのチャートを作成します。だから私はこのような何かを達成したい：

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は一部の反応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); 
    } 
}