Add region around SVG path for mouseover

http://stackoverflow.com/questions/29678967/add-region-around-svg-path-for-mouseover

HTML

<div id="canvas"></div>

CSS

.truepath {
    stroke-width: 1;
    fill: none;
}
.fatpath {
    stroke: gray;
    stroke-width: 123;
    fill: none;
    opacity:0.1;
}

body {
    font: 12px Arial;
    fill: black;
}

JavaScript

var w = 900,
    h = 400;

var svg = d3.select("#canvas")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("id", "visualization");

var pathData = [
    [{
        "x": 0,
        "y": 0
    }, {
        "x": 100,
        "y": 150
    }, {
        "x": 200,
        "y": 70
    }, {
        "x": 300,
        "y": 90
    }, {
        "x": 450,
        "y": 200
    }]
];

var line = d3.svg.line()
    .x(function(d) {
        return d.x;
    })
    .y(function(d) {
        return d.y;
    })
    .interpolate("monotone");

// draw the 'true' line for your chart (stroke width 1)
svg.selectAll(".truepath")
    .data(pathData)
    .enter()
    .append("path")
    .attr("d", line)
    .attr("class", "truepath").attr("stroke", "black");

// create a second path ('fatpath') just to use for mouseover.
// Use the same data and line gen function, but bigger stroke width
svg.selectAll(".fatpath")
    .data(pathData)
    .enter()
    .append("path")
    .attr("d", line)
    .attr("class", "fatpath")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

// turn the true line red
function mouseover() {
    svg.select(".truepath").attr("stroke", "red");

};

// turn the true line back to black
function mouseout() {
    svg.select("path").attr("stroke", "black");
};