How can you select and highlight all points on a line(s) using d3?

[Rishu Oberoi]

You only have the endpoint coordinates of a line as a 2D array.

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

and so on.

This line is presented to you over an image. The line is uneditable but you want a click event to select the entire line when you click anywhere on the line.

We can either find out if the coordinate location of the mouse click lies on the line and between its endpoints OR we can have a mouse event attached to the line objects. And then highlight all points that lie on the line between the two end point coordinates.

Now, you might even have to select multiple lines at a time - click on line 1, click on line 2 and highlight both the lines

How would you approach this?

My html looks like this -

<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>   

I try to select the paths via this -

 d3.selectAll('g.line path').on('click', function(data){
    d3.select(this).style("stroke","white");
  });

What am I doing wrong?

---

As an example, consider this already existing fiddle - http://jsfiddle.net/EhQMv/1/ It currently gets highlighted at the line nodes (ends). How would you highlight it's paths (lines between the nodes/circles)?