d3.js - 将“鼠标悬停”事件绑定到 d3.js 中一行上的点

Question

我想通过使用以下代码单击线来获取线上点的坐标：

var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

var lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");

var svgContainer = d3.select("body").append("svg")
    .attr("width", 200)
    .attr("height", 200);

var lineGraph = svgContainer.append("path")
    .data([lineData]).attr("d", lineFunction)
  //.attr("d", lineFunction(lineData))  
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .on('mousedown', function(d) {
        console.log({"x":d.x, "y":d.y})
    });

（我更新了代码以解决评论，但我仍然得到“对象 {x：未定义，y：未定义}”）

单击该行时，我不断收到“未定义”。我错过了一步吗？

Answer 1

您可以使用以下方法获取事件的坐标d3.event：

.on("mousedown", function() {
    console.log({"x": d3.event.x, "y": d3.event.y});
});

Answer 2

使用鼠标事件

.on('mousedown', function(d) {
    var m = d3.mouse(this);
    console.log("x:"+m[0]+" y:"+m[1]);
});

在你的函数 m[0] 和 m[1] 给你 X 和 Y。