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);
}

d3如何知道点击是否在一条线上？

1 个答案: