Javascript d3.js-鼠标悬停事件在svg组上无法正常工作

我有一个图形，我需要一条参考线，鼠标光标在这个图形中的任何地方。这条参考线将跟随鼠标在图形中的移动

但这似乎并不奏效。它仅适用于轴和轴的刻度线（.axis line）。在调试时，我发现鼠标事件在SVG上应用时效果很好，但在组上应用时效果不好，为什么

这是我的密码：

test.html

---

g

元素只是一个空容器，无法捕获单击事件（有关详细信息，请参阅）

然而，鼠标事件确实会产生泡沫。因此，可以通过首先确保

g

接收所有指针事件来实现所需的效果：

.g_main {
  // ..
  pointer-events: all;
}

然后在其上附加一个不可见的矩形作为悬停的位置：

即打开（“mousemove”，函数（）{
cx=d3.鼠标（this）[0]；
cy=d3.鼠标（this）[1]；
重绘线（cx，cy）；
})
.on（“鼠标悬停”，函数（）{
d3.选择全部（'.line_over'）。样式（“显示”、“块”）；
})
.on（“mouseout”，函数（）{
d3.选择全部（'.line_over'）。样式（“显示”、“无”）；
})
.append（'rect'）
.attr（'class'，'click capture'）
.style（'可见性'，'隐藏'）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，width）
.attr（'高度'），高度；

工作示例：

至于它们在应用于

svg

元素（）时工作的原因：

请注意，“svg”元素不是图形元素，在一致的svg独立文件中，最根的“svg”元素永远不会成为指针事件的目标，尽管事件可能会指向该元素。如果指针事件没有在图形元素上导致正面命中测试，那么它应该引发任何特定于用户代理的窗口行为，例如显示上下文菜单或控件以允许缩放和平移SVG文档片段

---

这也可以通过

即style（'pointer-events'，'all'）实现。

这个答案很好，但与D3 v3有关。。。2019年的一些新闻？没有简单的方法为事件设置“捕获所有”节点？我正在使用一个背景矩形，并且有相同的问题。我可以为.g_main和.click捕获类使用相同的矩形吗？

g元素只是一个空容器，无法捕获单击事件

-不正确。您可以在

g

元素上设置

指针事件：边界框

，并捕获该元素上的单击事件，而不考虑其子元素。这个答案实际上花费了我两个小时的时间，试图弄清楚当click listener在它的祖先之一上时，如何将

g

元素作为目标。嗯，如果我这样做，鼠标盖会工作，但我不能再单击svg中的其他元素了

var series,
classifications,
minVal,
maxVal,

svgW = 600,
svgH = 600,
//w = 1200,
//h = 1200,

vizPadding = {
    top: 120,
    right: 30,
    bottom: 120,
    left: 50
},

yAxMin_PA = 0,
yAxMax_PA = 50,
xAxMin_PA = 2002,
xAxMax_PA = 2008,
areaStrokeColors = ['#FF6600', '#3366FF', '#B8860B', '#458B00', 'white'];

var loadViz = function () {

    color = d3.scale.category10();

    data = {
        "lines": [{
                "line": [{
                        "X": 2002,
                        "Y": 42
                    }, {
                        "X": 2003,
                        "Y": 45
                    },

                    {
                        "X": 2005,
                        "Y": 47
                    },

                    {
                        "X": 2007,
                        "Y": 41
                    }
                ]
            }, {
                "line": [{
                        "X": 2003,
                        "Y": 33
                    }, {
                        "X": 2005,
                        "Y": 38
                    }, {
                        "Y": 36,
                        "X": 2008
                    }
                ]
            }, {

                "line": [{
                        "X": 2004,
                        "Y": 13
                    }, {
                        "X": 2005,
                        "Y": 19
                    }, {
                        "X": 2008,
                        "Y": 21
                    }
                ]
            }, {

                "line": [{
                        "X": 2003,
                        "Y": 20
                    }, {
                        "X": 2005,
                        "Y": 27
                    }, {
                        "X": 2008,
                        "Y": 29
                    }
                ]
            }
        ]
    };


    $("#viz").html("");
    buildBase();
    //setScales();
};

var buildBase = function () {

    margin = {
        top: 80,
        right: 120,
        bottom: 40,
        left: 40
    },
    width = 960 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom;

    t2 = height + margin.top + margin.bottom;

    x = d3.scale.linear()
        .domain([xAxMin_PA, xAxMax_PA])
        .range([0, width]);

    y = d3.scale.linear()
        .domain([yAxMin_PA, yAxMax_PA])
        .range([height, 0]);

    tickSizeToApplyX = 5;

    tickSizeToApplyY = 10;

    // Function to draw X-axis
    xAxis = d3.svg.axis()
        .scale(x)
        .ticks(tickSizeToApplyX)
        .tickSize(-height, 0, 0)
    //.tickSize(10)
    .orient("bottom")
        .tickPadding(5);

    // Function to draw Y-axis
    yAxis = d3.svg.axis()
        .scale(y)
        .ticks(tickSizeToApplyY)
        .tickSize(-width, 0, 0)
    //.tickSize(0)
    .orient("left")
        .tickPadding(5);

    // Define the line
    var valueline = d3.svg.line()
        .x(function (d) { /*console.log(d.X);*/
            return x(d.X);
        })
        .y(function (d) { /*console.log(d.Y);*/
            return y(d.Y);
        });

    // Define the line
    var referline = d3.svg.line()
        .x(function (dx) { /*console.log(d.X);*/
            return dx;
        })
        .y(function (dy) { /*console.log(d.Y);*/
            return dy;
        });

    // Append SVG into the html
    var viz = d3.select("#viz")
        .append("svg")
        .attr("width", width + margin.left + margin.right + 10)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("class", "g_main")
        .attr("transform", "translate(" + margin.left + "," + ((margin.top) - 30) + ")");

    viz.on("mousemove", function () {
        cx = d3.mouse(this)[0];
        cy = d3.mouse(this)[1];
        console.log("xx=>" + cx + "yy=>" + cy);
        redrawline(cx, cy);
    })
        .on("mouseover", function () {
            d3.selectAll('.line_over').style("display", "block");
        })
        .on("mouseout", function () {
            d3.selectAll('.line_over').style("display", "none");
        });

    //console.log(this);
    viz.append("line")
    //d3.select("svg").append("line")
    .attr("class", 'line_over')
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", x(xAxMax_PA))
        .attr("y2", 0)
        .style("stroke", "gray")
        .attr("stroke-dasharray", ("5,5"))
        .style("stroke-width", "1.5")
        .style("display", "none");

    // Draw X-axis
    viz.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Draw Y-axis
    viz.append("g")
        .attr("class", function (d, i) {
            return "y axis"
        })
        .call(yAxis);


    function redrawline(cx, cy) {
        d3.selectAll('.line_over')
            .attr("x1", 0)
            .attr("y1", cy)
            .attr("x2", x(xAxMax_PA))
            .attr("y2", cy)
            .style("display", "block");
    }
};

.g_main {
  // ..
  pointer-events: all;
}