2

我对 D3js 中的转换有一段时间了。我在这里发布了一个小提琴：动态区域图。我遇到的问题是，当尝试遵循本教程路径转换时，我遇到了 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)
4

1 回答 1

1

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

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

轴域

我已经修改了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; })
    ];
}

如果您想让所有值都可见，那么当新值进入时，您将获得突然形成的不连续切线的摆动效果。您可以通过删除.slice(0, -1).

最初的transform

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

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)");

另外，我启用了xAxis.

于 2013-09-29T20:41:30.013 回答