Home » Javascript » javascript – D3: Not able to click on SVG element

javascript – D3: Not able to click on SVG element

Posted by: admin February 23, 2020 Leave a comment

Questions:

I’m trying to click on path element in SVG element using d3.

var group = d3.select('#g827403SandyGroup');
var paths = group.selectAll('Path');
paths.on('click', function() {
        alert('Hi');
   });

However this is working (when I adding style to Path and later click is working).

    var group = d3.select('#g827403SandyGroup');
    var paths = group.selectAll('Path');
    paths.style("fill", "green");
    paths.on('click', function() {
            alert('Hi');
        });

What causing the problem?

How to&Answers:

It’s because the fill of the path is set to “none”. Without a fill, clicking on the inside of the path does not trigger/dispatch a click event. Clicking on the path stroke still does, however. Then again, the stroke is also “none” here (by default), so you can’t click the stroke either.