Javascript D3沿鼠标上的路径移动圆平移X轴上的线时移动打断

我有以下建议：

在plunkr中，您将看到我正在尝试构建一个带有1+路径/线的图形，在该图形上，我在鼠标移动时移动一些圆元素。为了适应X轴和Y轴，我需要一些余量。当我平移X轴上的路径/直线，为X轴腾出空间时，沿路径/直线移动的圆不再遵循正确的路径

这些行直接添加到svg元素中，它们的定义如下所示：

var line = d3.svg.line()
        .x(function (d, i) {
            //return margin.left + xScale(i);
            return xScale(i);
        })
        .y(function (d) {
            return margin.top + yScale(d);
//                         return yScale(d);
        })
        .interpolate("cardinal");

有人知道为什么吗？

而不是

var lines = svg.selectAll(".gLine")
   ...

要将这些行添加到您创建并（正确）翻译的组中：

var lines = lineGroup.selectAll(".gLine")

类似地，您需要将圆移动到已转换的组中：

var circles = lineGroup.selectAll("circle")

这“重用”

行组

，这很好，如果您愿意，也可以创建“circleGroup”

这将修复表示，但捕获的鼠标坐标仍将偏移。解决此问题的一种方法是调整捕获的鼠标位置的x：

mouseUnderlay.on("mousemove", function () {
    var x = d3.mouse(this)[0] - margin.left;

---

我试图用彩色区域替换图形上的线条，但这破坏了获取SVGPoint坐标的部分：有什么想法吗？谢谢