d3.js - transform&过渡，多行 [英] d3.js - transform & transition, multiple lines

问题描述

我已按照以下说明操作： http://bost.ocks.org/mike/path/

然后，想出了如何在图形中创建多个线：在D3.js中绘制多行

主要问题：我经历了一次困难的转变，

我创建了 行：（时间：epoch时间，step forward）

  var seriesData = [[{time：1335972631000，value：23}，{time：1335972631500，value： 427，...]，
 [{time：1335972631000，value：45}，{time：1335972631500，value：13} 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 ，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
$ b

我意识到我在x（xAxis显示日期：时间）使用纪元时间值作为我的例子可能会工作，如果我使用说明性的系列数据上面。

问题是transform，translate使用x（1），x（0）返回巨大的数字，方式比我需要转换的图更大。

我修改了更新 N 方法：

新问题：
现在图表向左移动正确，但线条/图表弹出回到右边，每个setInterval更新执行。

正确地push / shift的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

有任何想法吗？

解决方案

有一件事情跳出来，作为一个错误的可能性是使用的数据调用，最初是

  .data（seriesData）
  

更新使用

  .data（[seriesData]）
  

这可能会导致问题，但是很难看出剩下的事情，你能把它放在jsfiddle吗？

I have followed the instructions at: http://bost.ocks.org/mike/path/ for creating and animating single graphs with single lines.

And, figured out how to create multiple lines in a graph: Drawing Multiple Lines in D3.js

Main Issue: I am having a hard time transitioning multiple lines after I shift & push in new data into my data array.

I create the N lines with: (time: epoch time, steps forward)

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');

And am trying to update N lines with a Javascript setInterval(...) calling a method with:

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

It can draw the initial set perfectly, but as soon as I update the data array, the lines just disappear.

---

UPDATE 01

I realized that I am using epoch time values in the x (xAxis shows date:time) as my example would probably work if I used the illustrative seriesData above.

The problem was the "transform", "translate" using x(1), x(0) was returning huge numbers, way larger than my graph needed to be transitioned.

I modified the update N lines method (above) to use a manual approach:

New Issue: Now the graph moves left correctly, but the lines/graph pops back to the right, each setInterval update executes.

It's push/shift'ing the seriesData array correctly but it doesn't keep scrolling to the left to show the new data that IS actually being drawn.

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

Another reference that I have used is this: http://bl.ocks.org/1148374

Any thoughts?

解决方案

One thing that jumps out at me as a possibility for error is the data calls that are used, the initial is

.data(seriesData)

the update uses

.data([seriesData])

which may cause issues, but its hard to tell without seeing the rest of what is going on, can you perhaps put it on jsfiddle?

这篇关于d3.js - transform&过渡，多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！