d3 我如何知道点击是否在线？

Question

代码取自Live drawing of a line in D3.js

var line;

var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);

    vis.on("mousemove", mousemove);
}

function mousemove() {
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    vis.on("mousemove", null);
}

我如何知道用户是否点击了之前添加的行？在 mousedown() 函数中，我只希望在用户单击 svg 时添加一个新行，而不是附加到 svg 的行。

本质上，在mousedown()函数中，怎么说如果m != line，则继续追加一行？

Answer 1

@michael 你可以做这样的事情来知道它是用户点击的线条还是 svg。

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);
    if (d3.event.srcElement.tagName == "svg"){
        //handle svg
    } else if (d3.event.srcElement.tagName == "line"){
        //handle line
    }
    vis.on("mousemove", mousemove);
}