d3.js -преобразование и переход, несколько строк

Я следовал инструкциям в:http://bost.ocks.org/mike/path/для создания и анимации отдельных графиков с помощью отдельных линий.

И я понял, как создать несколько линий на графике:Рисование нескольких линий в D3.js

Основная проблема:У меня возникают проблемы с переходом между несколькими линиями после того, как я сдвигаю и вставляю новые данные в мой массив данных.

Я создаюNстрок с:(временем :временем эпохи, шагами вперед)

var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
                  [{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
                  [{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
                  [...],[...],...
                  ];

var seriesColors = ['red', 'green', 'blue',...];

line = d3.svg.line()
       .interpolate(interpolation)
       .x(function(d) { return x(d.time); })
       .y(function(d) { return y(d.value); });

graphGroup.selectAll(".line")
       .data(seriesData)
           .enter().append("path")
           .attr("class", "line")
           .attr("d", line)
           .style('stroke', function(d, i) { return seriesColors[i]; })
           .style('stroke-width', 1)
           .style('fill', 'none');

И пытаюсь обновитьNстрок с помощью Javascript setInterval (... )вызов метода с:

graph.selectAll("path")
   .data(seriesData)
   .attr("transform", "translate(" + x(1) + ")")
   .attr("d", line)
     .transition()
   .ease("linear")
   .duration(transitionDelay)
   .attr("transform", "translate(" + x(0) + ")");

Он может отлично отрисовывать начальный набор, но как только я обновляю массив данных, линии просто исчезают.


ОБНОВЛЕНИЕ 01

Я понял, что использую значения времени эпохи в x (xAxis показывает дату :время ), поскольку мой пример, вероятно, будет работать, если я буду использовать иллюстративный ряд данных выше.

Проблема заключалась в том, что «преобразование», «перевод» с использованием x (1 ), x (0 )возвращали огромные числа, намного больше , чем требовалось моему графику. быть переведены.

Я изменил обновлениеМетод Nлиний (выше )для использования ручного подхода:

Новая проблема: Теперь график перемещается влево правильно, но линии/ график выталкивает обратно вправо, выполняется каждое обновление setInterval.

Массив seriesData перемещается корректно, но не прокручивается влево, чтобы показать новые данные, которые на самом деле рисуются.

graph.selectAll("path")
       .data(seriesData)
       .attr("d", line)
       .attr("transform", null)
         .transition()
       .ease("linear")
       .duration(2000)
       .attr("transform", "translate(-200)");

Еще одна ссылка, которую я использовал, это:http://bl.ocks.org/1148374

Есть мысли?

6
задан Community 23 May 2017 в 12:16
поделиться