d3を使用してライン上のすべてのポイントを選択してハイライトするにはどうすればよいですか？

2次元配列としての線の終点座標のみがあります。d3を使用してライン上のすべてのポイントを選択してハイライトするにはどうすればよいですか？

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

and so on.

この行は画像上に表示されます。行は編集できませんが、行のどこかをクリックすると、クリックイベントで行全体を選択する必要があります。

マウスクリックの座標位置が線上にあり、その端点間にあるかどうか、または線オブジェクトにマウスイベントを付けることができます。そして、2つの終点座標の間にある線上にあるすべての点を強調表示します。 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