svg - manipulate mouseover "hit area"in d3.js -

i'd show , hide node in svg when mouseover / mouseout, issue shape inside node path 1.5px width not easy hit area in mouseover event, that's inconvenient user experience.

i'd know if there's way make hit area wider using arbitrary width, invisible user?

a snippet of code:

link.enter()     .append('g').attr('class', 'link')     .append('line')     .attr('class', 'path')     .attr('marker-end', function(d, i) {         if (i === 2) {             return 'url(#arrow)';         } else {             return null;         }     }).on('mouseover', function(d) {         //alert(json.stringify(d));         alert('mouseover');     }).on('mouseout', function(d) {         alert('mouseout');     }); 

the css:

.node .path {   stroke: #878f8f;   stroke-width: 1.5px;   fill:none; } 

you can add line g transparent stroke , large stroke-width, increase hit area.

// subscribe mouse events on entire g genter = link.enter()     .append('g')     .attr('class', 'link')     .on('mouseover', function(d) {         //alert(json.stringify(d));         alert('mouseover');     }).on('mouseout', function(d) {         alert('mouseout');     });  // instead of 1 line, append 2 lines inside g, , make // 1 of them transparent , "fat", enlarge // hit area lines = genter     .selectall('.path').data(['visible', 'invisible']) lines.enter()     .append('line')     .attr('class', 'path')     .attr('marker-end', function(d, i, j) {         // j parent's         if (j === 2) {             return 'url(#arrow)';         } else {             return null;         }     })     .attr({         // returning null these functions defaults whatever         // .path class's css props doing         'stroke-width': function(d, i) { return d == 'invisible' ? 10 : null },         'stroke': function(d, i) { return d == 'invisible' ? 'transparent' : null }     })