Math D3：转换两条相同的路径，使其平行运行

我的问题如下:

（a） 我正在D3中绘制两条坐标完全相同的路径。同样的路径

（b） 我现在想变换其中一条路径，使它们平行运行，并且路径之间的“宽度”始终等于x像素。我的代码如下：

d3.select("#path2")
.attr("transform", "translate(15,0)");

不幸的是，代码会产生以下结果：

正如你所看到的，这些线不是平行的，而是相交的。事实上，这有点像狗的早餐。我觉得这可能比听起来要复杂得多。还是这样？有什么想法吗

---

谢谢大家

一种方法是说“平行”路径的每一段应与原始路径的相应段平行。因此，对于原始图像的每一段，计算一条平行线，距离给定，然后与连续线相交。您应该始终如一地选择方向，即线段的法线；例如，在每种情况下，将法线方向计算为切线方向的90度闭合旋转，或在每种情况下计算为逆时针旋转

---

在一些很好的情况下——与最小的线段长度相比，相邻线段之间的角度很小，距离也很小——这很可能会满足您的需求。在其他情况下，你会弄得一团糟。

我有一个不同的建议：创建两条相同的路径，就像你现在正在做的那样。然后，如果希望距离为16px，则将其中一条路径的

笔划宽度设置为大于16px，并将另一条路径用作另一条路径，在另一条路径的非常相同的位置处，将
笔划宽度设置为16

这样，一条路径将在另一条路径中形成“空心空间”，而无需任何复杂的数学运算

这是一个演示。我画了一个圆圈，只是为了表示路径是空的：


var svg=d3.选择（“svg”）
变量数据集=[
[0, 30],
[20, 30],
[50, 55],
[60, 70],
[100, 120],
[110, 90],
[135, 121],
[200, 70],
[300, 130]
];
var line=d3.line（）
.x（功能（d）{
返回d[0]；
})
.y（功能（d）{
返回d[1]；
});
svg.append（“圆”）
.attr（“cx”，200）
.attr（“cy”，70）
.attr（“r”，30）
.attr（“填充”、“teal”）
var defs=svg.append（“defs”）；
变量掩码=定义追加（“掩码”）
.attr（“id”、“路径掩码”）；
mask.append（“rect”）
.attr（“宽度”，300）
.attr（“高度”，150）
.attr（“填充”、“白色”）；
mask.append（“路径”）
.attr（“d”，行（数据集））
.attr（“笔划”、“黑色”）
.attr（“填充”、“无”）
.attr（“笔划宽度”，16）；
var path=svg.append（“路径”）
.attr（“d”，行（数据集））
.attr（“掩码”、“url（#路径掩码）”）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，20）
.attr（“填充”、“无”）

你能发一把小提琴吗？我最近遇到了一个类似的问题。只要我能抓到我的电脑，我会尽快解决的！你克服了你的问题吗？这显然是最好的方法。谢谢你，杰拉尔多，很抱歉我接受了你的回答。