d3.js用鼠標點擊最近的一行

Question

我需要繪製一條以另一條線的最近點爲起點的線，這個點最初被認爲是我的左鍵點擊。我使用d3.js庫進行繪圖。例如，我想繪製一個大的'T'字母，並且需要自動匹配那些交叉點。我可以繪製各種線條和其他結構，只是想放在一起。

謝謝。

Answer 1

這個例子可以幫助你畫線。要連續畫線，只需點擊頁面並移動鼠標。如果你想停止繪製線，只需雙擊你喜歡的任何一個。 如果仍有問題，請分享您的代碼或更新您的問題。

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。