d3.js - 变换&过渡,多行(d3.js - transform & transition,

2019-09-16 22:51发布

我已按照说明进行操作: 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) + ")");

它可以完美地绘制初始设置,但只要我更新数据阵列,该行刚刚消失。


UPDATE 01

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

问题是“改造”,“翻译”使用X(1),X(0)返航庞大的数字,方法大于需要我的图形上转变。

我修改了更新 N行的方法(上文)使用手工的方法:

新问题:现在图表向左移动,正确的,但线/图弹出回到右,每一个setInterval的更新执行。

这是推/正确shift'ing的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?



文章来源: d3.js - transform & transition, multiple lines