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

当在X轴上平移线时，D3沿着鼠标移动路径移动圆圈

1 个答案: