用d3转换多个元素

Question

我对D3js的转换感到很沮丧。我在这里贴了一个小提琴：dynamic area graph。我遇到的问题是，当试图遵循本教程path transitions时，我遇到了与xAxis同步的问题。 Bostock表示域应略微倾斜，以便数据看起来从侧面“移位”。但是，当我这样做时，反映的数据将列在一个刻度标记下，该刻度标记应该在列出的实际时间后面“2分钟”。如果我只是按原样更新数据，而不用剪辑路径做一些棘手的事情，它可以正常工作。所有数据都是同步的。仅供参考，xAxis是整数线性标度。处理日期字符串是疯狂的，即使d3有很好的时间操作，我只是觉得处理epoch更容易。如果有人可以查看小提琴，让我知道如何转换整个绘图......我希望它像bostock的例子一样流畅。

由于SO需要一些代码，这里是我正在生成的数据结构。剩下的就是小提琴：

    setInterval(function(){
  lastTime = lastTime.add('m',1);
  var data = {"apikey":"FOO",
    "description":"a dumb description",
    "beg_effective_dt_tm":lastTime,
    "data":{
      "sum":getRandomInt(385,4000),
      }
    };
    tick(data);
},1000)

Answer 1

我认为这与你所追求的很接近：http://jsfiddle.net/JJ7Rj/1/ 它很接近，因为图表延迟了一个值。

大多数架构已经存在，您担心可能会丢失xAxis和data之间的 sync 是正确的。迈克通过改变他的range音阶来绕过它。另一种（更好的，IMO）方式是通过更改域来实现。我做了以下两个主要更改。

轴的域

我修改了minMax函数，使其不包含xAxis域中的最新点和最后一点。请注意，这意味着最近的值（以及最旧的值）实际显示在可见区域之外。这是使用monotone插值的一个不幸的限制，迈克在他的帖子底部谈到了这个插值。

function minMax(pd) {
  return [
      d3.min(pd.slice(1).slice(0, -1),function(d){ return d.beg_effective_dt_tm; }),
      d3.max(pd.slice(1).slice(0, -1),function(d){ return d.beg_effective_dt_tm; })
    ];
}

如果你想让所有值都可见，那么当新值进入时你会突然形成不连续切线的摆动效果。你可以通过删除{{ 1}}。

最初的.slice(0, -1)

对于每个元素，我最初将DOM元素一步放在右边。

transform

然后，最后，我已经将所有东西都归还到他们应有的位置：

var step = x(newVal.beg_effective_dt_tm) - x(pd[pd.length - 1].beg_effective_dt_tm);
// ...
           .attr("transform", 'translate(' + step + ')');
// ...

此外，我已启用 clipPath.selectAll("path,circle,.dp").transition() .ease("linear") .attr("transform", "translate(" + 0 + ",0)"); 的转换。