CODEWITHSUNDEEP
javascriptjsond3.jssvg
Keith
Keith

Reputation: 302

Chained transitions data issues

I've been working with an updated and ever evolving version of Bostock's chained transitions.

Recently I had to move to a slightly more complex data object model, and decided it was a good time to switch to json data.

I also had to adjust the "current year" to include exactly 12 months (and thus part of last year). IE. The drops to zero in the data are not acceptable for a scaled model.

Now, for some reason I can't get the data to update properly in the area and valueLine transitions.

All the axis and labels update correctly. However, instead of rendering the new data selection and then transitioning it, the current data slides off.

I believe it is a mistake in this portion of my code but I can't track it down:

Also, full code is over on Plunker HERE.

function change() {
    //clearTimeout(timeout);

    current_year = d3.select(this).text();

    // First transition the line & label to the new current_year.
    var t0 = svg.transition().duration(750);
    t0.selectAll(".label").attr("transform", transform).text(current_year);


    //then transition the y-axis.
    yScale.domain([(d3.min(data[current_year], function(d) { return d.close; })*.98), d3.max(data[current_year], function(d) { return d.close; })]);

    area.y0(yScale(yScale.domain()[0]));    
    t0.selectAll(".area").attr("d", area).attr('fill', colors[current_year]);
    t0.selectAll(".line").attr("d", valueLine).attr('stroke', colors[current_year]);
    var t1 = t0.transition();
    t1.selectAll(".label").attr("transform", transform);
    t1.selectAll(".y.axis").call(yAxis);

    //then update the xAxis
    xScale.domain([d3.min(data[current_year], function(d) { return d.date; }), d3.max(data[current_year], function(d) { return d.date;})]);
    svg.selectAll(".x.axis").call(xAxis);


  }

  function transform(d) {
    return "translate(" + xScale(d.date) + "," + yScale(d.close) + ")";
  }

And the JSON data format looks like this:

{
  "2017": [
      {
        "date": "2016/11/01",
        "close": 778
      },
      {
        "date": "2016/12/01",
        "close": 769
      },
      {
        "date": "2017/01/01",
        "close": 837
      },
      {
        "date": "2017/02/01",
        "close": 829
      },
      {
        "date": "2017/03/01",
        "close": 828
      },
      {
        "date": "2017/04/01",
        "close": 816
      },
      {
        "date": "2017/05/01",
        "close": 799
      },
      {
        "date": "2017/06/01",
        "close": 805
      },
      {
        "date": "2017/07/01",
        "close": 804
      },
      {
        "date": "2017/08/01",
        "close": 789
      },
      {
        "date": "2017/09/01",
        "close": 780
      },
      {
        "date": "2017/10/01",
        "close": 775
      }
    ],
 "2016": [
            {
        "date": "2016/01/01",
        "close": 837
      },
      {
        "date": "2016/02/01",
        "close": 829
      },
      {
        "date": "2016/03/01",
        "close": 828
      },
      {
        "date": "2016/04/01",
        "close": 716
      },
      {
        "date": "2016/05/01",
        "close": 759
      },
      {
        "date": "2016/06/01",
        "close": 705
      },
      {
        "date": "2016/07/01",
        "close": 704
      },
      {
        "date": "2016/08/01",
        "close": 789
      },
      {
        "date": "2016/09/01",
        "close": 780
      },
      {
        "date": "2016/10/01",
        "close": 775
      },
      {
        "date": "2016/11/01",
        "close": 778
      },
      {
        "date": "2016/12/01",
        "close": 769
      }
    ],
  "2015": [
            {
        "date": "2015/01/01",
        "close": 637
      },
      {
        "date": "2015/02/01",
        "close": 629
      },
      {
        "date": "2015/03/01",
        "close": 668
      },
      {
        "date": "2015/04/01",
        "close": 616
      },
      {
        "date": "2015/05/01",
        "close": 669
      },
      {
        "date": "2015/06/01",
        "close": 605
      },
      {
        "date": "2015/07/01",
        "close": 624
      },
      {
        "date": "2015/08/01",
        "close": 689
      },
      {
        "date": "2015/09/01",
        "close": 680
      },
      {
        "date": "2015/10/01",
        "close": 675
      },
      {
        "date": "2015/11/01",
        "close": 668
      },
      {
        "date": "2015/12/01",
        "close": 669
      }
    ],
"2014": [
            {
        "date": "2014/01/01",
        "close": 537
      },
      {
        "date": "2014/02/01",
        "close": 529
      },
      {
        "date": "2014/03/01",
        "close": 528
      },
      {
        "date": "2014/04/01",
        "close": 516
      },
      {
        "date": "2014/05/01",
        "close": 549
      },
      {
        "date": "2014/06/01",
        "close": 575
      },
      {
        "date": "2014/07/01",
        "close": 594
      },
      {
        "date": "2014/08/01",
        "close": 589
      },
      {
        "date": "2014/09/01",
        "close": 570
      },
      {
        "date": "2014/10/01",
        "close": 555
      },
      {
        "date": "2014/11/01",
        "close": 578
      },
      {
        "date": "2014/12/01",
        "close": 569
      }
    ]
}

Upvotes: 1

Views: 31

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

Rebind the data to the paths...

svg.select(".area").datum(data[current_year]);
svg.select(".line").datum(data[current_year]);

... and calculate the xScale domain before the transition:

xScale.domain([d3.min(data[current_year], function(d) {
    return d.date;
}), d3.max(data[current_year], function(d) {
    return d.date;
})]);

Here is the updated plunker: https://plnkr.co/edit/xBAR5LaDL8iifjlPdgeF?p=preview

Upvotes: 1

Related Questions