小编ste*_*edA的帖子

我刚开始学习d3.js库.我需要制作一个svg编辑器,我教过使用这个编辑器是个好主意.我有一个问题,我做了一些功能,我想在鼠标点击时加载这些功能.函数正在创建从A点到B点的线,所以我只需要在单击Line按钮时启动这些功能.

这是代码块:

var line;
var container = d3.select("body").append("svg")
    .on('mousedown',mousedown)
    .on('mouseup',mouseup);


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

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

 function mousemove(){
    var coordinates = d3.mouse(this);
        line.attr("x2", coordinates[0])
            .attr("y2", coordinates[1]);
};
function mouseup(){
     container.on("mousemove", null);
};

HTML

<button id="lineBtn">Line</button>

CSS

line {
   stroke: black;
   stroke-width: 3px;
}

svg{
    border:1px solid black;
    width:500px;
    height:500px;
    margin-left: 40%;
    margin-right:40%; 
}