6

我已按照以下说明操作：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

有什么想法吗？

4

1 回答 1

1

一件事让我觉得有可能出错是使用的数据调用，最初是

.data(seriesData)

更新使用

.data([seriesData])

这可能会导致问题，但是如果不看到正在发生的其他事情就很难说出来，你可以把它放在 jsfiddle 上吗？

于 2012-05-01T22:06:31.390 回答