reactjs와 d3 차트 통합

Question

d3 라이브러리를 사용하여 3 개의 차트를 만들고 싶습니다. 각 차트에는 고유 한 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은 일부 반응 Dom을 반환 만 제대로 작동합니다.

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의 모든 첫째, 차트가 마지막으로 생성 된 생성된다는 점이다 : CreateSingleChart() 기능은 D3 기능입니다. 그래서 내 추가 루프에서 발생하지 않는 것 같아요,하지만 html 먼저 렌더링되고, 그 후에 실행됩니다 추가.

어떻게 통합합니까?

Answer 1

D3은 이와 같이 사용할 수 없습니다. 어느 쪽이든 당신은 recharts 같은 선언적 차트를 사용하거나이 같은 componentDidMount에 의지해야한다 : 나는 큰 성공을 Recharts을 사용하고

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