d3.js 用鼠标点击捕捉最近的行

Question

我需要绘制一条线，该线从另一条线的最接近我的左键单击的点开始。我使用 d3.js 库来绘图。比如我想画一个大的'T'字母，需要自动匹配那些交叉点。我可以画出各种线条和其他结构，只是想放在一起。

谢谢。

Answer 1

这个例子可以帮助你画 lines.To 连续画线只需点击页面并移动鼠标。如果您想停止绘制线条，只需双击即可。如果仍然存在问题，请分享您的代码或更新您的问题。

var line;

var vis = d3.select("body").append("svg") 
      .attr("width", 600)
      .attr("height", 400)
      .on("click", mousedown)
      .on("dblclick", mouseup);

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

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

 function mousemove() {
            var m = d3.mouse(this);
            line.attr("x2", m[0])
            .attr("y2", m[1]);
   }

  function mouseup() {
         vis.on("mousemove", null);
  }

Jsfiddle here.

d3.js 用鼠标点击捕捉最近的行

d3.js catch the nearest line with mouse click

line

draw

d3.js