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

Question

我按照以下说明操作: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');

我正在尝试使用Javascript setInterval(...)更新N行,调用方法:

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显示日期:时间),因为如果我使用上面的说明性seriesData,我的示例可能会有效.

问题是"变换","翻译"使用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

有什么想法吗？

Answer 1

我突然意识到可能发生错误的一件事是使用的数据调用，最初是

.data(seriesData)

更新使用

.data([seriesData])

这可能会导致问题，但如果不看到其余的情况就很难判断，你能把它放在 jsfiddle 上吗？