D3.js D3基准的关键功能

我想知道在D3中如何将某个键函数与数据绑定相关联。这似乎可以通过

.data（[values[，key]]）

实现，但该键不能作为

.datum（[value]）

绑定中的参数使用

<>这一点在绘制SVG路径时尤其相关，其中更新值不附加到数据数组的末尾，但有助于中间粒度的变化。

此示例说明了这种情况：

每个数据点是一个[（x），（y）]元组。红点根据x轴上的键功能正确移动：

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

但该线是使用datum（）创建的，因此没有与键函数关联。因此，当在中间添加新数据点时，其线段会不合理地移动

---

因此，在本例中，如何使线顶点根据红点的运动而移动？

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

稍微详细一点的解释。D3数据模型依赖于将数据点绑定到DOM元素。也就是说，每个数据点只匹配一个DOM元素。您正在绘制的路径是单个DOM元素，因此只有一个与之匹配的数据“点”，在本例中，该点是一个数组。您不能使用D3的数据模型来精确实现这一点——路径只有一个DOM元素。此外，SVG路径是不容易被破坏的实体——您需要一个

M

命令开始，然后是

L

命令。可以通过将线打断为不同的段来完成，但动画不起作用（请参见）

实现所需的方法是预处理数据以计算任何中间点