Question

我刚开始学习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%; 
}

Answer 1

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

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

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

var line;
var circle;
var container = d3.select("body").append("svg");

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);
});

function mousedownLine() {
  container.on("mousemove", mousemoveLine);
  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]);
};

function mousemoveLine() {
  var coordinates = d3.mouse(this);
  line.attr("x2", coordinates[0])
    .attr("y2", coordinates[1]);
};

function mouseupLine() {
  container.on("mousemove", null);
};

function mousedownCircle() {
  container.on("mousemove", mousemoveCircle);
  var coordinates = d3.mouse(this);
  circle = container.append("circle")
    .attr("cx", coordinates[0])
    .attr("cy", coordinates[1]);
};

function mousemoveCircle() {
  var coordinates = d3.mouse(this);
  circle.attr("r", Math.hypot(coordinates[0] - circle.attr("cx"), coordinates[1] - circle.attr("cy")));
};

function mouseupCircle() {
  container.on("mousemove", null);
};

line {
  stroke: teal;
  stroke-width: 2px;
}

circle {
  stroke: tomato;
  fill: none;
  stroke-width: 2px;
}

svg {
  border: 1px solid black;
  width: 500px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="lineBtn">Line</button>
<button id="circleBtn">Circle</button>

无法阅读属性＆quot; sourceEvent＆＃39;在事件侦听器中为null

1 个答案: