如何通过用户交互在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