d3.js - 转换和转换，多行

问题描述：

我遵循以下指令：http://bost.ocks.org/mike/path/用于创建和动画单行单个图形。d3.js - 转换和转换，多行

而且，想出如何在图形中创建多个行：Drawing Multiple Lines in D3.js

主要问题：我有一个很难转换多行后，我转向&推入新的数据到我的数据阵列。

我创建ñ线有：（时间：划时代的时间，大踏步地前进）

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

，我试图更新ň线通过一段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) + ")");

它可以完美地绘制初始集，但只要我upd吃了数据数组，线条就消失了。

UPDATE 01

我意识到，我在X（X轴显示日期：时间）采用划时代的时间值作为我的例子，如果我用上面的说明性seriesData可能会工作。

问题是“转换”，“翻译”使用x（1），x（0）返回的是巨大的数字，比我需要转换的图表大大。

我修改更新Ñ线路的方法（上文）使用手动方法：

新问题： 现在图表向左移动正确，但线/曲线图啪啪回到右边，执行每个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

有什么想法？即跳出我为错误的可能性

我开始认为这与我使用d3.time.scale（）...为x与d3.scale.linear（）...有关？ – August

你有没有解决过这个问题？如果有，请发布您的解决方案。 –

我最终制作了三个独立的图，每个图都有一行。然后我使用CSS将图形ID堆叠在一起。管理和重用更容易。特别是如果我想让它流畅。 – August

答

的一件事是所使用的数据呼叫，最初是

.data(seriesData)

更新使用

.data([seriesData])

这可能会导致问题，但很难说没有看到发生的事情，你可以把它放在jsfiddle上吗？

出色的观察，但它不能解决更新问题。 – August

[数据]来自这个例子：http://bl.ocks.org/1148374 – August

所以我认为这意味着当改变第二次数据调用来匹配第一次，没有什么改变？ - 当然有些情况下你想要将所有数据作为单个元素数组传递，但从我所知道的情况来看，这似乎不是其中之一。如果没有看到更多的代码，恐怕我不能再帮忙了。 – Josh

d3.js - 转换和转换，多行

相关推荐