score:0

Accepted answer

It seems to me that you just want the listener to fire when the user clicks on the stroke of the path, not on its fill (the confusion arises because you're using the term "line", which means another thing in a SVG).

If that's correct the solution is simple, you just need to set the pointer-events of those paths to visibleStroke or stroke:

.attr("pointer-events", "visibleStroke");

Here is a demo, you can click in the fill or outside the path and nothing happens, click on its stroke and the listener fires:

var svg = d3.select("svg");
var path = svg.append("path")
  .attr("d", "M50,20 L250,20 L250,130 L50,130 Z")
  .style("fill", "teal")
  .style("stroke", "black")
  .style("stroke-width", 4)
  .attr("pointer-events", "visibleStroke")
  .on("click", function() {
    console.log("clicked")
  });
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Also, it's worth mentioning that something is wrong in your code: if you set the fill to none, the default pointer-events should not fire. Here is a demo:

var svg = d3.select("svg");
var path = svg.append("path")
  .attr("d", "M50,20 L250,20 L250,130 L50,130 Z")
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 4)
  .on("click", function() {
    console.log("clicked")
  });
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>


Related Query

More Query from same tag