score:1

Accepted answer

You could use Document.elementsFromPoint(). Although this method is still considered experimental it is implemented by all major browsers.

The method will return all elements underneath the specified coordinates including all ancestors of the paths you are interested in, though. To get just your paths, you will have to apply an additional filtering: 

d3.selectAll(document.elementsFromPoint(d3.event.x, d3.event.y)).filter("path");

Because Stack Snippets accessing the DOM tree somehow tend to freeze the browser, here is a JSFiddle demonstrating the use.

Should this shortcoming get fixed in the future, here is the working demo:

    var myData = "x	line1	line2	line3\n\
1	63.4	62.7	72.2\n\
2	58.0	59.9	67.7\n\
3	53.3	59.1	69.4\n\
4	55.7	55.7	55.7\n\
5	58.7	58.7	58.7\n\
6	77.0	77.0	77.0\n\
7	57.9	56.7	82.3\n\
8	61.8	56.8	78.9\n\
9	69.3	56.7	68.8\n\
10	71.2	60.1	68.7\n";
    var data = d3.tsvParse(myData);

    var margin = {
      top: 20,
      right: 20,
      bottom: 40,
      left: 50
    };
    var height = 500 - margin.bottom - margin.top,
      width = 960 - margin.left - margin.right;
    var line = d3.line()
      .x(function(d) {
        return X(d.x);
      })
      .y(function(d) {
        return Y(d.y);
      });

    var X = d3.scaleLinear().range([0, width]);
    var Y = d3.scaleLinear().range([height, 0]);
    var colour = d3.scaleOrdinal(d3.schemeCategory10);

    colour.domain(d3.keys(data[0]).filter(function(key) {
      return key !== "x";
    }));

    var lines = colour.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {
            x: +d.x,
            y: +d[name]
          };
        })
      };
    });

    var svg = d3.select('body').append('svg')
      .attr('height', height + margin.top + margin.bottom)
      .attr('width', width + margin.left + margin.right)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    X.domain(d3.extent(data, function(d) {
      return d.x;
    }));
    Y.domain([
      d3.min(lines, function(c) {
        return d3.min(c.values, function(v) {
          return v.y;
        });
      }),
      d3.max(lines, function(c) {
        return d3.max(c.values, function(v) {
          return v.y;
        });
      })
    ]);

    svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(X));

    svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(Y));

    var gLines = svg.selectAll('.lines')
      .data(lines)
      .enter().append('g')
      .attr('class', 'lines');

    gLines.append('path')
      .attr('d', function(d) {
        return line(d.values);
      })
      .style('stroke', function(d) {
        return colour(d.name)
      })
      .style('fill', 'none')
      .on('mouseenter', function(d) {
        console.dir(d3.selectAll(document.elementsFromPoint(d3.event.x, d3.event.y)).filter("path"));
      });
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag