D3 基准的键功能答案

【问题标题】：Key function for D3 datumD3 基准的键功能
【发布时间】：2013-07-23 13:21:59
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： d3.js

【解决方案1】：

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

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

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

【讨论】：