Feb 21, 2013

Posted by in Articles, Tutorials | 105 Comments

Making SVG paths more sensitive to mouseover events

I was recently working on a visualization in D3 where about 100 or so observations were encoded using randomly generated SVG paths, the idea being that they would collectively form an abstract shape.  Hovering over each path would highlight it and bring up a small box with more details.  Since the curved paths were 1px wide and intersected each other arbitrarily, they weren’t particularly sensitive to mouseover events.

SVG has a method called getIntersectionList buy kamagra online that “returns the list of graphics elements whose rendered content intersects the supplied rectangle”.  That is to say, by calling that method every time the cursor moves within the SVG container, one would be able to determine which path the cursor is on, or perhaps even which path is closest to it.  Unfortunately, getIntersectionList is not yet supported by all browsers

buy kamagra online buy kamagra online


So here’s an easy fix that works well: for each path, generate a second thicker path, set its opacity to 0 and then attach the mouseover event to it rather than the visible path.

      .attr("opacity", 1)
      .attr("id", function(d) { return "p" + d.id; })
      .attr("stroke-width", 1)
      .attr("stroke", "cyan")
      .attr("class", "treebranch")
      .attr("d", function(d) {
        //path data
      .each(function(d, i) {
          .attr('shape-rendering', 'crispEdges')
          .style('opacity', 0)
          .attr("id", function() { return "transp" + d.id; })
          .attr("stroke-width", 5)
          .attr("stroke", "white")
          .attr("class", "treebranch_transparent")
          .attr("d", function() {
            return $("#p"+d.id).attr("d");
          .on('mouseover', function() {
            //mouseover event
  1. Alejandro says:

    Where should I put this code? In which part? Sorry I’m new on this…

Leave a Reply