Still a resize bug after 0.4.8... about react-d3-components HOT 5 CLOSED

Hey thanks for the report!
The graph should fill out the whole axis right?
And this happens if you resize the parent component?
I will check it out tomorrow when I am back at work.

from react-d3-components.

Yes, the graph should fill out the whole axis, and yes, it happens when the parent resizes. The axis resizes correctly, but not all the children (which my highlight shows). Thanks.

from react-d3-components.

I am looking at the code here but didn't find anything yet.
BTW did you use the default scales or provide your own ones? I think I found a (not related problem) there too hehe.
Since when you pass a timestamp the problem is fixed that means the data is correct but it doesn't get re-rendered I guess?
Need to find a way to replicate this.

from react-d3-components.

I make my own scales. The graph is actually data from the three last years, where I modify the previous years to set them the same as the latest year, so the scale is always one full year. And yes, the timestamps are correct. If I keep resizing (back to portrait on mobiles for instance) it renders correctly again. The way I've worked around this bug in my current app is I set a timestamp as the key for the graph element, so whenever resize events happens the graph will get recreated (forcefully). I do not currently have a minimal example demonstrating the problem. Not yet at least.

from react-d3-components.

FWIW, here's the actual code that create the structure that is fed straight into LineChart:

  createCharts: function(datas, width) {
    if (!width)
      return null;
    let firstSet = datas[0];
    let lastSet = datas[datas.length-1];
    const rmargin = 0;
    const lmargin = 26;
    const lastdate = lastSet.values[ lastSet.values.length-1 ].x;
    const endDate = new Date(lastdate.getFullYear(), 11, 31, 23, 59, 59);
    const startDate = new Date(lastdate.getFullYear(), 0, 1);
    let xScale = d3.time.scale().domain([startDate,
                                         endDate])
          .range([0, width-lmargin-rmargin]);


    let colors = d3.scale.ordinal()
          .domain(this.state.chart_wl_keys)
          .range(['#ffe0e0', '#ffb0b0', '#ff0000']);

    let chart_wl = {
      data: datas,
      margin: {top: 10, bottom: 50, left: lmargin, right: rmargin},
      width: width,
      height: 180,
      xScale: xScale,
      key: (new Date()).getTime(),
      stroke: {strokeWidth: '3', strokeLinecap: 'round'},
      colorScale: colors,
      xAxis: {tickValues: xScale.ticks(d3.time.month, 1),
              tickFormat: d3.time.format("%b")}
    };

    return chart_wl;
  },

This gets called after each update with the updated width parameter.

from react-d3-components.