Я работаю с обновленной и постоянно меняющейся версией переходов в Бостоке.
Недавно мне пришлось перейти к несколько более сложной модели объектов данных и решила, что самое время переключиться на json-данные.
Мне также пришлось корректировать "текущий год", чтобы включить ровно 12 месяцев (и, следовательно, часть прошлого года). IE. Капли до нуля в данных неприемлемы для масштабированной модели.
Теперь по какой-то причине я не могу получить данные для правильного обновления в области и переходов valueLine.
Все оси и метки обновляются правильно. Однако вместо того, чтобы выполнять новый выбор данных, а затем переходить на него, текущие данные сдвигаются.
Я считаю, что это ошибка в этой части моего кода, но я не могу отследить его:
Кроме того, полный код заканчивается на Plunker ЗДЕСЬ.
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) + ")";
}
И формат данных JSON выглядит следующим образом:
{
"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
}
]
}
Перетащите данные в пути...
svg.select(".area").datum(data[current_year]);
svg.select(".line").datum(data[current_year]);
... и вычислить домен xScale
до перехода:
xScale.domain([d3.min(data[current_year], function(d) {
return d.date;
}), d3.max(data[current_year], function(d) {
return d.date;
})]);
Вот обновленный плункер: https://plnkr.co/edit/xBAR5LaDL8iifjlPdgeF?p=preview