以前也有类似的问题，但我没有找到一个完全明确的答案：
假设我有一个由 valuelineA 组成的基本折线图，有20个顶点。
我想将此行转换为另一个具有256个顶点的 valuelineB 。
X域保持不变，Y域也是如此。假设 valuelineA 和 valuelineB 均匀分布在X域（时间）上。
如何在 valuelineA 和 valuelineB 之间进行转换，以便没有水平动画？
以下代码将在 valuelineA 和 valuelineB 之间转换，但转换会将 valuelineA 挤压到 valuelineB <的前20个顶点/强>
var trends=svg.append("path")
.attr("class", "line")
.attr("d", valuelineA(dataA));
trends
.transition()
.duration(3200)
.attr("d", valuelineB(dataB))
;
答案 0 :(得分：1)
我很害怕，这不是一个简单的解决方案。以下是一些关于如何解决这个问题的建议：
对于背景：默认转换查找由新的valueline函数创建的字符串中的所有数字，并将它们与＆＃34; d＆＃34;中的数字相匹配。当前附加到path元素的属性字符串。匹配的数字会被转换，但该行末尾的所有额外点都会被加入。
您可以编写自定义转换函数以获得更多控制（查找＆＃34; d3自定义补间＆＃34;例如），但这仍然存在如何确定要转换哪些点以及要插入哪些点的问题在 - 和之间插入新点。
在this answer中，我创建了一个函数来插入您可能想要查看的新点的值。请注意，在该问题中，数据点的数量没有变化（有些只是从未定义到定义）。这意味着问题的前半部分 - 匹配旧数据点和新数据点 - 很容易。
作为对不稳定过渡的解决方案，我提议实际上将路径分解为单独的线段，以便您可以将每个线段添加到位。这实际上也可以解决匹配问题，因为您可以使用data-join key function进行匹配（如果您想查看内部使用的代码来执行此操作，那么{{3} }）。
多线方法可能是您可以适应的解决方案。否则，如果你想坚持使用单个<path>元素作为线图（如果你有数千个数据点，它具有明显的性能优势，那么你需要创建一个路径过渡的开始，与最后一行的点数相同。
这是你的攻击计划：
创建一个转换数据数组，其中包含 new 数据数组中每个x值的数据点（我假设所有旧的x值也将包含在更大的数据集，如果不是更棘手）。
对于每个x值，将其y值设置为旧数据中的值（如果存在），否则设置为插值。
更新路径＆＃34; d＆＃34;值没有转换是基于此新数据数组的行。如果你做的一切都是正确的，它看起来不应该有任何改变，因为所有的新数据点都将完全位于旧数据点之间。
现在，为新数据创建过渡到行;过渡将是平滑的，因为每个新点都有一个匹配的起点。
正如我上面所说，你可以在一个自定义的＆＃34; tween＆＃34;功能，但这可能只是增加了额外的复杂功能。