如何使用D3連接網格中2個點之間的路徑

Question

嗯，我已經有made網格和2個可拖動的矩形。我希望在兩個矩形之間創建一個始終跟隨網格（無對角線）的路徑。同樣，一旦路徑被創建，它應該自動調整，如果其中一個矩形被移動。有人可以提出一種方法。

Answer 1

要做到這一點，最簡單的方法是使用path string：

var s = 10  //grid size 
var p0 = [10, 15] //start point 
var p1 = [20, 25] //end point 

var connectionPath = svg.append('path') 
    .attr('d', [ 
    'M', p0[0]*s, p0[1]*s, //put pen at start point 
    'H', p1[0]*s,   //move pen horizontally 
    'V', p1[1]*s   //move pen vertically 
    ].join(' ')) 
    .attr('fill', 'none') 
    .attr('stroke', '#000') 

要調整時，矩形拖，更新d每個矩形的一個拖動時間屬性。