Closest Line Segment

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.segment {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linecap: round;
}

.segment--hover {
  stroke: red;
  stroke-width: 5px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.extent {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="tree.js"></script>
<script>

var topology = {
  arcs: [
    d3.range(40, 921, 30).map(function(x) {
      return [x, (Math.sin(x / 200)) * 200 + 250];
    })
  ]
};

var svg = d3.select("svg")
    .on("mousemove", mousemoved);

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", "100%")
    .attr("height", "100%");

var path = d3.geo.path()
    .projection(null);

var root = tree(topology);

function mousemoved() {
  var leaf = root.nearest(d3.mouse(this));

d3.select(".segment--hover")
      .classed("segment--hover", false);

d3.select(leaf.coordinates[0].node)
      .classed("segment--hover", true)
      .each(function() { this.parentNode.appendChild(this); });
}

(function visit(node) {
  svg.insert("path", "*")
      .attr("class", "extent")
      .attr("d", path({type: "Polygon", coordinates: [[
        [Math.round(node.extent[0][0]), Math.round(node.extent[0][1])],
        [Math.round(node.extent[1][0]), Math.round(node.extent[0][1])],
        [Math.round(node.extent[1][0]), Math.round(node.extent[1][1])],
        [Math.round(node.extent[0][0]), Math.round(node.extent[1][1])],
        [Math.round(node.extent[0][0]), Math.round(node.extent[0][1])]
      ]]})).node();
  if (node.children) node.children.forEach(visit);
})(root);

</script>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js