React uygulamasında D3 grafiğini Duyarlı hale getirme

Question

Şu anda D3 kullanarak React uygulamasında çizim oluşturmaya çalışıyorum. Her ikisini de birleştirmek için aşağıdaki bağlantıyı kullandım:

http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/.

Ben de duyarlı grafiği yapmak için bağlantıda verilen çözümleri denedim:

Resize svg when window is resized in d3.js

o kene atlayarak başlar tepki ile bütünleştirerek üzerine bağımsız kodunda iyi çalışıyor olsa da. Ben yeni bilgilerle yeniden işlemek için tepki başlatılmasında önemli, setstate veya boyutlandırmak üzerine bir şey gerek gerekebilir

var data = [ 
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64}, 
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67}, 
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70}, 
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64}, 
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72}, 
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75}, 
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71}, 
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80} 
]; 
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; 

data.forEach(function(d) { 
      d.mytime = parseDate(d.mytime); 
     }); 
//var margin = { top: 30, right: 30, bottom: 40, left:50 }, 
var margin = { top: 30, right: 30, bottom: 40, left:50 }, 
height = 200, 
width = 800; 
var color = "green"; 
var xaxis_param = "mytime"; 
var yaxis_param = "value" 
var params1 = {margin:margin,height:height,width:width, color: color, xaxis_param:xaxis_param, yaxis_param :yaxis_param}; 
draw_graph(data,params1); 




function draw_graph(data,params){ 


    //Get the margin 
    var xaxis_param = params.xaxis_param; 
    var yaxis_param = params.yaxis_param; 
    var color_code = params.color; 
    var margin = params.margin; 
    var height = params.height - margin.top - margin.bottom, 
     width = params.width - margin.left - margin.right; 

    var x_extent = d3.extent(data, function(d){ 
     return d[xaxis_param]}); 
    var y_extent = d3.extent(data, function(d){ 
     return d[yaxis_param]}); 

    var x_scale = d3.time.scale() 
     .domain(x_extent) 
     .range([0,width]); 


    var y_scale = d3.scale.linear() 
     .domain([0,y_extent[1]]) 
     .range([height,0]); 



    //Line 
    var lineGen = d3.svg.line() 
     .x(function (d) { 
      return x_scale(d[xaxis_param]); 
     }) 
     .y(function (d) { 
      return y_scale(d[yaxis_param]); 
     }); 
    var myChart = d3.select('body') 
       .append("div") 
      .classed("svg-container", true) 
      .append('svg') 
    .attr("preserveAspectRatio", "xMinYMin meet") 
    .attr("viewBox", "0 0 800 600") 
    //class to make it responsive 
    .classed("svg-content-responsive", true)  
        .attr('class','my-chart') 
        .style('background', '#E7E0CB') 

        .append('g') 
        .attr('transform', 'translate('+ margin.left +', '+ margin.top +')'); 
      myChart 
        .append('svg:path') 
        .datum(data) 
        .attr('class', 'line') 
        .attr("d",lineGen) 
        .attr('stroke', color_code) 
        .attr('stroke-width', 1) 
        .attr('fill', 'none'); 


    var legend = myChart.append("g") 
      .attr("class", "legend") 
      .attr("transform", "translate(" + 5 + "," + (height - 25) + ")") 

     legend.append("rect") 
      .style("fill", color_code) 
      .attr("width", 20) 
      .attr("height", 20); 

     legend.append("text") 
      .text(yaxis_param) 
      .attr("x", 25) 
      .attr("y", 12); 

    var vGuideScale = d3.scale.linear() 
     .domain([0,y_extent[1]]) 
     .range([height, 0]) 

    var vAxis = d3.svg.axis() 
     .scale(vGuideScale) 
     .orient('left') 
     .ticks(5) 


    var hAxis = d3.svg.axis() 
     .scale(x_scale) 
     .orient('bottom') 
     .ticks(d3.time.minute, 5); 

    myChart.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(hAxis); 

    myChart.append("g") 
     .attr("class", "y axis") 
     .call(vAxis) 


} 

ancak varlık: https://jsfiddle.net/adityap16/11edxrnq/1/

Kod Bağımsız D3: yalnız D3 için jsfiddle Çalışma React için yeni, çalışmayı başaramıyorum.

Düzenleme: Ben hala düzenleme yapmaya çalışıyorum ama pencereyi küçültürken, tam bir ekranda değil, görebildiğiniz zaman, sorun, x ekseni ve y ekseni üzerindeki keneler gibi görünüyor. Hala nedenini anlamaya çalışıyorsun?

Teşekkürler!

Answer 1

Bu yüzden cevabı Github üzerinde React (açık-d3 bileşenleri) içindeki açık konulardan birinde bulabildim. Bağlantı ve bir kod parçacığı ekte:

https://github.com/codesuki/react-d3-components/issues/9

Kodu:

let AreaGraph = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    getInitialState() { 
     return { 
      parentWidth: 0 
     } 
    }, 

    getDefaultProps() { 
     return { 
      width: '100%', 
      height: 300, 
      margin: { left: -1, top: 10, bottom: 0, right: 1 } 
     } 
    }, 

    handleResize(e) { 
     let elem = this.getDOMNode(); 
     let width = elem.offsetWidth; 

     this.setState({ 
      parentWidth: width 
     }); 
    }, 

    componentDidMount() { 
     if(this.props.width === '100%') { 
      window.addEventListener('resize', this.handleResize); 
     } 
     this.handleResize(); 
    }, 

    componentWillUnmount() { 
     if(this.props.width === '100%') { 
      window.removeEventListener('resize', this.handleResize); 
     } 
    }, 

    render() { 
     let { width, height, margin, xScale, yScale, xAxis, ...props } = this.props; 

     // Determine the right graph width to use if it's set to be responsive 
     if(width === '100%') { 
      width = this.state.parentWidth || 400; 
     } 

     // Set scale ranges 
     xScale && xScale.range([0, width - (margin.left + margin.right)]); 
     yScale && yScale.range([height - (margin.top + margin.bottom), 0]); 

     return (
      <div className={"usage__cpu__graph "+props.className}> 
       <AreaChart 
        ref="chart" 
        width={width} 
        height={height} 
        margin={margin} 
        xScale={xScale} 
        yScale={yScale} 
        xAxis={xAxis} 
        {...props} 
       /> 
      </div> 
     ); 
    } 
})