在 X 轴上平移线时，D3 在鼠标移动中断时沿路径移动圆

Question

我有以下 plunkr：http://plnkr.co/edit/FLSz6swyiDuNchTYo2Xf?p=preview

在 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");

有人知道为什么吗？

Answer 1

而不是

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

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

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

同样，您需要将圆圈移动到翻译组中：

var circles = lineGroup.selectAll("circle")

这“重用”lineGroup，这很好，或者您可以根据需要创建一个“circleGroup”。

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

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

Here it is working