如何使用d3選擇並突出顯示一條或多條線上的所有點？

您只有一條線的端點座標爲二維數組。如何使用d3選擇並突出顯示一條或多條線上的所有點？

lines[0][0] -> line 1, coordinates x1,y1 
lines[0][1] -> line 1, coordinates x2, y2 

and so on.

此行會通過圖像呈現給您。該行是不可編輯的，但是當您單擊該行上的任意位置時，您希望單擊事件來選擇整行。

我們可以確定鼠標單擊的座標位置是在線上還是在它的端點之間，或者我們可以將鼠標事件附加到線對象上。然後突出顯示位於兩個端點座標之間的所有點。

現在，你甚至可能在一次選擇多行 - 點擊第1行，單擊行2，突出兩條線

你會如何處理這個？

我的HTML看起來像這樣 -

<div id="myImage" class="col-md-12 nopadding"> 
    <svg viewBox="0 0 800 400" width="100%" height="100%" id="svg1"> 
    <g transform="translate(0,0)scale(1)"> 
    <image href="someimage.jpg" id = "someimageid" x="0" y="0" width="100%" height="100%"></image> 
    <g class="line" readonly="true" id="item_1"> 
     <path d="M100 100L300, 200" vector-effect="non-scaling-stroke"></path> 
     <circle class="item_1_circle" cx="100" cy="100" vector-effect="non-scaling-stroke" r="2"></circle> 
     <circle class="item_1_circle" cx="100" cy="100" vector-effect="non-scaling-stroke" r="2"></circle> 
    </g> 
    </g> 
    </svg> 
</div>

我試着通過這個選擇的路徑 -

 d3.select(this).selectAll('path') 
      .data(function (d) { 
      return [d.points]; 
      }) 
      .enter() 
      .append('path') 
      .attr('d', line) 
      .on('click', doclicks); 
     }); 

function doclicks(d, i){ 
    d3.select(this).attr({ 
     stroke: "purple" 
    }); 
    }

這似乎是工作，但間歇性。點擊我的線條時我必須非常準確，而且我無法更改線寬。

舉個例子，考慮這個已經存在的小提琴 - http://jsfiddle.net/EhQMv/1/ 目前，它得到的線節點（端）突出。你如何突出它的路徑（節點/圓圈之間的線）？

來源

2017-03-15 Righto