D3.js 使用d3转换多个元素

我在D3js中的转换玩得很开心。我在这里贴了一把小提琴：。我遇到的问题是，在尝试学习本教程时，我遇到了与xAxis同步的问题。Bostock指出域应该稍微倾斜，以便数据看起来从侧面“移入”。但是，当我这样做时，所反映的数据将在一个刻度线下列出，该刻度线比实际应列出的时间晚“2分钟”。如果我只是按原样更新数据，而不使用剪辑路径进行复杂的操作，那么效果很好。所有数据都是同步的。仅供参考，xAxis是一个整数，线性刻度。处理日期字符串令人恼火，尽管d3具有很好的时间操纵性，但我发现处理epoch更容易。如果有人可以检查小提琴，让我知道如何过渡整个绘图…我希望它是光滑的，就像在博斯托克的例子

由于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)

---

我认为这与您的目标非常接近： 它关闭是因为图形延迟了一个值

大部分架构已经存在，您担心

xAxis

和

数据之间可能会失去同步，这是正确的。迈克通过改变音阶的
范围来绕过它。另一种（更好的，IMO）方法是通过更改域来实现。我做了以下两个主要更改

轴的域
我修改了
minMax
函数，使其不包括
xAxis
域中的最新点和最后一点。请注意，这意味着最近的值（以及最早的值）实际上显示在可见区域之外。这是使用
单调
插值的一个不幸限制，Mike在他的文章底部谈到了这一点

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; })
    ];
}

如果希望所有值都可见，那么当新值出现时，将获得不连续切线突然形成的摆动效果。您可以通过删除
.slice（0，-1）
来获得该值

初始的
转换
对于每个元素，我最初将DOM元素放在右边一步

var step=x（newVal.beg_effective_dt_tm）-x（pd[pd.length-1].beg_effective_dt_tm）；
// ...
.attr（“transform”，“translate”（'+step+'））；
// ...

最后，我将所有东西都转换回了它们应有的位置：

clipPath.selectAll（“路径，圆，.dp”）.transition（）
.ease（“线性”）
.attr（“转换”、“转换”（+0+），0）”；

另外，我已经为
xAxis
启用了转换。我是否正确理解您确实有一个有效的解决方案（没有剪辑路径）？输入-更新-退出模式成功地对数据起作用，但它没有使用transition（），我想添加它以使其平滑。当我倾斜数据以将其隐藏在剪辑路径后面时，我似乎无法使该部分正常工作。执行此操作时，数据图会偏离x轴，并反映错误的时间与数据相关性。因此，如果不使用剪辑路径，它会正常工作？否。不管是否剪辑，数据仍然是倾斜的。这是一个很好的思考方式。这显然更容易概念化！我注意到您正在转换每个元素，而我正在执行“.attr”（“transform”，null）；”。看来我有几件事做错了。谢谢你的建议！我刚刚将此应用于我制作的其他几个时间序列图，它们不再存在相同的问题。使用
.attr（'transform'，null）
也应该执行与将其设置为
translate（0，0）
相同的操作。我更喜欢明确的版本。很高兴能帮上忙。：）