title: Remove Path Fills Completely in D3
body: <p>I am currently building a platform for mapping some data that require drawing lines between nodes in the map. For now, I have created those lines
  (<a href="https://i.stack.imgur.com/QN2fD.png" rel="nofollow noreferrer">Picture 1 (<code>fill: none</code>)</a>). Furthermore, I intend to add a click listener to the lines which I have also done. Unfortunately, it seems the path have a fill area that also listens to the events and overlapped on the other paths which make it impossible to click paths below it (<a href="https://i.stack.imgur.com/ELxB2.png" rel="nofollow noreferrer">Picture 2 default fill attr</a>). I have tried to set <code>fill: none</code> (as shown in the first picture) but it seems only removing the colours, not the fill area.
  Here is my code to add the lines:</p>
  
  <pre><code>function createPath(company) {
  
    //Create Paths Line
    var linePathGenerator = d3.line()
      .x(function(d) {
        return d.x;
      })
      .y(function(d) {
        return d.y;
      })
      .curve(d3.curveMonotoneX);
  
    // Add Path to the Line Layer
    var svgPath = layerArc.append("path")
      .attr("stroke", companyConfig[company].color)
      .attr("stroke-width", "1.5px")
      .attr("fill", "none")
      .style("opacity", 0.6);
  
  
    var d = linePathGenerator(adjency[company])
    var line = svgPath.attr("d", d)
  
    // Click Listener 
    line
      .on('click', function() {
        if (!d3.select(this).classed("active")) {
          layerArc.selectAll('path')
            .attr("stroke-width", "1.5px")
            .style("opacity", 0.6);
          d3.select(this)
            .attr("stroke-width", 3)
            .style("opacity", 1)
            .attr("class", "active")
          d3.selectAll(".nodes svg circle")
            .style("stroke", 'none')
          var circles = d3.selectAll(".nodes svg")
          circles = circles.filter(function(d) {
            return d.value.company == company
          })
          circles.select('circle').style("stroke", 'white')
            .style("stroke-width", 2)
        } else {
          layerArc.selectAll('path')
            .attr("stroke-width", "1.5px")
            .style("opacity", 0.6)
            .attr("class", "deactive")
          d3.selectAll(".nodes svg circle")
            .style("stroke", 'none')
        }
      })
  
    var totalLength = svgPath.node().getTotalLength();
  
    svgPath
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(4000)
      .ease(d3.easeLinear)
      .attr("stroke-dashoffset", 0)
  
  }
  </code></pre>
  
  <p>Anyone know how to remove the fill entirely? or any other suggestion on how I draw the lines in the same manner but without Path?</p>