Многолинейный график D3 - странная анимация

Я создал многострочную диаграмму с простой анимацией. В начале данных нет, а после нажатия кнопки эмулируются новые значения и строка "переместиться" ушла. Движение анимируется с помощью «сдвига».

Проблема возникает, когда линии «заполняют» всю область графика (это означает, что для всех значений x есть значения y), а затем линии анимируются по-другому. Похоже, что значения y анимированы по кривой, а не сдвинуты влево.

Анимация работает хорошо для обеих осей:

svg.selectAll("g .x.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(xAxis);
svg.selectAll("g .y.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(yAxis);

И не для строк (мне очень помог этот код)

svg.selectAll("g .city path")
  .data(processedData).transition().duration(500)
  .ease("linear")
  .attr("d", function(d, i) { return line(d.values); })
  .attr("transform", null);

Скрипт доступен здесь.

Спасибо за помощь.


animation d3.js linechart
person Karel Frajták    schedule 07.04.2013    source источник
comment
Вам нравится фиксированный пример?   -  person Seanny123    schedule 26.09.2014
comment
Это еще не было исправлено.   -  person Karel Frajták    schedule 26.09.2014

Ответы (2)


arrow_upward
5
arrow_downward

Проблема в том, что вы удаляете данные, когда их слишком много. Способ d3 сопоставляет данные с существующими данными (когда вы вызываете функцию .data()) по индексу. То есть первый элемент в массиве, который вы передаете .data(), соответствует первому связанному элементу данных, независимо от того, как на самом деле выглядят данные.

В вашем случае происходит следующее: как только вы начинаете удалять данные, отдельные точки данных обновляются, а не сдвигаются. Вот почему вы видите «загогулину» — она обновляет каждую точку данных до ее нового значения, которое является значением, которое точка данных справа имела раньше.

С кодом, который у вас есть в настоящее время, это трудно исправить, потому что вы не сопоставляете данные для отдельных строк явно. Я бы порекомендовал вам взглянуть на вложенные выборки, которые позволяют рисовать несколько линий и по-прежнему явно сопоставлять данные для индивидуальные. Ключевым моментом является использование необязательного второго аргумента для .data() для предоставления функции, которая сообщает ей, как сопоставлять данные (см. документацию). Таким образом, вы можете сказать, что некоторые точки данных исчезли, а другие должны быть смещены.

person Lars Kotthoff    schedule 07.04.2013
comment
Часть 2 этого руководства по гистограмме также поможет: mbostock.github.io/d3 /tutorial/bar-2.html - person Andrew Staroscik; 08.04.2013
comment
Спасибо за комментарии, но непонятно. Столбчатую диаграмму легко понять, потому что есть только 1 набор данных, а разница между данными для гистограммы и линейной диаграммы велика (изовлированные значения против массива значений). Ларс, можешь помочь мне с вложенным выделением? - person Karel Frajták; 08.04.2013
comment
Идея состоит в том, что вы вызываете .selectAll().data() дважды — первый раз для линии и второй раз для точек данных. Итак, в первом вызове вы передаете матрицу, где каждая строка содержит точки для линии. Затем на основе этих данных вы делаете второй выбор фактических путей и добавляете элементы пути. Это объяснено более подробно в руководстве, на которое я ссылаюсь, — подумайте о строках таблицы как о строках, а о ячейках таблицы — как о точках данных отдельных строк. - person Lars Kotthoff; 08.04.2013

arrow_upward
2
arrow_downward

вы можете обойти эту проблему в 2 шага.

в функции update(): перерисуйте .data() с новой точкой в ​​конце, но без удаления первой старой точки (с анимацией), например, каждый ключ то же самое до и после перехода.

в конце функции update(): вы можете удалить старое значение и перерисовать .data() без анимации.

person Alban    schedule 18.04.2013