d3.js - 如何通过用户交互在 d3.js 中绘制直线

Question

我想根据用户的点击来绘制线条。也就是说，用户将单击某处的起点和某处的终点，我想在这些点之间画一条直线。无论如何，有没有办法在 d3.js 中执行此操作。可能吗？

Answer 1

是的，可以通过鼠标点击画线，可以使用e.clientX和e.clientY

container.onclick = function (e) {
    xPosition[i] = e.clientX;
    yPosition[i] = e.clientY;
}

获取 X、Y 位置作为数组，并将数组传递给 SVG 线条属性

var line = svgContainer.append("line")
        .attr("x1", xPosition[i - 1])
        .attr("y1", yPosition[i - 1])
        .attr("x2", xPosition[i])
        .attr("y2", yPosition[i])

这会对您有帮助jsfiddle-draw line by click