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

D3 move circle along path on mousemove breaks when translating line on X axis

本文关键字：移动 中断 鼠标 路径 D3      更新时间：2023-09-26

我有以下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");

有人知道为什么吗？

而不是

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;

在这里它正在工作

相关文章：