Javascript 无法读取属性'；sourceEvent'；事件侦听器中的空值

我刚开始学习d3.js库。我需要制作一个svg编辑器，我教过使用这个编辑器是个好主意。我有一个问题，我写了一些函数，我希望这些函数运行在鼠标点击

这些函数创建一条从点a到点B的直线，所以我只需要在单击“直线”按钮时调用这些函数

以下是代码块：

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

根据您的建议，问题在于您处理按钮的方式：

document.getElementById("lineBtn").onclick = function drawLine(){ 
    mousedown(); 
    mousemove(); 
    mouseup(); 
};

您不能像这样调用这些函数有几个原因，但主要是因为没有

this

被传递到

d3.mouse

，因此没有源事件

更好的方法是使用按钮设置正确的侦听器，如下所示：

d3.select("#lineBtn").on("click", function() {
  container.on('mousedown', mousedownLine)
    .on('mouseup', mouseupLine);
});

d3.select("#circleBtn").on("click", function() {
  container.on('mousedown', mousedownCircle)
    .on('mouseup', mouseupCircle);
});

这是一个演示（使用D3V5，与您的v3在这个问题上没有什么不同）：

var线；
var圈；
var container=d3.select（“body”）.append（“svg”）；
d3.选择（“#lineBtn”）。在（“单击”，函数（）{
container.on（'mousedown'，mousedownLine）
.on（'mouseup'，mouseupLine）；
});
d3.选择（“#圆圈”）。在（“单击”，函数（）{
container.on（'mousedown'，mousedown循环）
.on（'mouseup'，mouseupCircle）；
});
函数mousedownLine（）{
容器上（“mousemove”，mousemoveLine）；
var坐标=d3.鼠标（此）；
行=容器。追加（“行”）
.attr（“x1”，坐标[0]）
.attr（“y1”，坐标[1]）
.attr（“x2”，坐标[0]）
.attr（“y2”，坐标[1]）；
};
函数mousemoveLine（）{
var坐标=d3.鼠标（此）；
line.attr（“x2”，坐标[0]）
.attr（“y2”，坐标[1]）；
};
函数mouseupLine（）{
container.on（“mousemove”，null）；
};
函数mousedowncycle（）{
container.on（“mousemove”，mousemovecirle）；
var坐标=d3.鼠标（此）；
圆圈=容器。追加（“圆圈”）
.attr（“cx”，坐标[0]）
.attr（“cy”，坐标[1]）；
};
函数mousemovecirle（）{
var坐标=d3.鼠标（此）；
circle.attr（“r”，Math.hypot（坐标[0]-circle.attr（“cx”），坐标[1]-circle.attr（“cy”）；
};
函数mouseupCircle（）{
container.on（“mousemove”，null）；
};
行{
笔画：水鸭；
笔画宽度：2px；
}
圈{
中风：番茄；
填充：无；
笔画宽度：2px；
}
svg{
边框：1px纯黑；
宽度：500px；
高度：300px；
}

线
在按钮上绑定函数时，圈出标题中出现错误的时间/地点。document.getElementById（“lineBtn”）.onclick=function drawLine（）{mousedown（）；mousemove（）；mouseup（）；}您所说的
仅在单击Line按钮时启动这些函数是什么意思？在svg上使用鼠标功能之前，您必须先单击line按钮才能正常工作？是否要使用它来关闭/打开线条绘制功能？或者你的意思是点击那个按钮应该画一条线？我会有3个按钮，例如，线，圆，矩形。当我点击Line按钮时，我希望能够用鼠标画一条线。当我单击“圆”时，我希望能够用鼠标画一个圆，也可以画矩形。在vue.js中使用techanjs/d3时，我遇到了一个类似的问题——有人知道如何让它工作吗？
document.getElementById("lineBtn").onclick = function drawLine(){ 
    mousedown(); 
    mousemove(); 
    mouseup(); 
};

d3.select("#lineBtn").on("click", function() {
  container.on('mousedown', mousedownLine)
    .on('mouseup', mouseupLine);
});

d3.select("#circleBtn").on("click", function() {
  container.on('mousedown', mousedownCircle)
    .on('mouseup', mouseupCircle);
});