Проблемы данных с цепочками переходов

1

Я работаю с обновленной и постоянно меняющейся версией переходов в Бостоке.

Недавно мне пришлось перейти к несколько более сложной модели объектов данных и решила, что самое время переключиться на 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
      }
    ]
}
Теги:
d3.js
svg

1 ответ

1
Лучший ответ

Перетащите данные в пути...

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

  • 0
    Переплет данных был тем, чего мне не хватало. По какой-то причине я подумал, что достаточно просто вызвать функцию снова. Большое спасибо!
  • 0
    Один вопрос, я заметил, что теперь метка данных (в крайнем правом углу графика) неправильно перемещается за пределы графика. Что мы сделали, чтобы вызвать это?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню