3

我想知道如何将某个关键功能与 D3 中的基准数据绑定相关联。这似乎是可能的，但键在绑定.data([values[, key]])中不能作为参数使用。.datum([value])

这在绘制 SVG 路径时变得特别重要，其中更新的值不会附加到数据数组的末尾，但会导致中间粒度的变化。

这个例子说明了这种情况：http: //jsfiddle.net/vastur/LtHyZ/1/

每个数据点都是一个 [(x),(y)] 元组。红点根据 x 轴上的键功能正常移动：

.data(lineData, function(d) {return d[0]})

但是该行是使用 datum() 创建的，因此没有关联任何键函数。因此，当在其间添加新数据点时，它的线段会不合逻辑地移动。

那么，在这个例子中，如何让线的顶点随着红点的运动而移动呢？

4

1 回答 1

1

简短的回答是，对于您正在处理的情况，这是不可能的。问题是只有一个元素（线），所以匹配和计算连接没有意义。要实现您想要的行为，您需要为两条线指定相同数量的支持点。

稍微详细一点的解释。D3 数据模型依赖于将数据点绑定到 DOM 元素。也就是说，每个数据点都与一个 DOM 元素完全匹配。您正在绘制的路径是单个 DOM 元素，因此只有一个与之匹配的数据“点”，在这种情况下，该点是一个数组。您不能将 D3 的数据模型用于您想要的——路径只有一个 DOM 元素。此外，SVG 路径是不能轻易破坏的实体——您需要一个M命令开始，然后L在您的情况下使用命令。您可以通过将线分成不同的段来实现，但是动画不起作用（请参见此处）。

实现您想要的方法是预处理数据以计算任何中间点。

于 2013-07-23T15:19:24.350 回答