How to invoke “click” event programmatically in d3?

I'm trying like that (also at

<!DOCTYPE html>
    <script src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src="js-libs/jquery-1.7.js"></script>

      #test {
      width: 400px;
      height: 500px;


    <script type="text/javascript">
      $(function() {
        var w = 600,
            h = 350;

        var vis ="#test").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

        var g = vis.selectAll("g")
        .data([ { x:1 , y: 2} ])

        .attr("fill", "red")
        .attr("stroke", "red")
        .attr("stroke-width", "10")
        .attr("d", "M 100 350 l 150 -300")"path")
        .on("click", function() { console.log("Hello"); });

        // XXX: how to execute click programmaticaly?

    <div id="test"></div>

But doesn't work

I think we may use

But how to do it?



not sure why, but there appears to be a discrepancy with the way jQuery and d3 handle events that causes a jQuery induced click event $("#some-d3-element").click() to not dispatch to the d3 element.

a workaround:

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");

and then call it:


Simply call the .on method as a getter for the registered value (i.e. your handler function), then call the result of that:"path").on("click")();

It gets a little more complicated if your handler uses the bound data and/or event fields, or if you've got multiple event listeners bound (e.g "click.thing1" and "click.thing2"). In that case, you're probably best off just firing a fake event using the standard DOM methods:

var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true, /* ... */);"path").node().dispatchEvent(e);

With D3 v4 you will likely want this:'#some-id').dispatch('click');



This works. I'm using pie charts, so I'm selecting all the "selected" pie slices, and for each of them, retrieving the attached "click" callback (that I have attached in another portion of code not included here, using d3's .on() method) and then invoking with the expected parameters in the correct context.

d3.selectAll("g.selected").each(function(d, i) {
    var onClickFunc ="click");
    onClickFunc.apply(this, [d, i]);

I came this thread looking for a d3 mousemove event for angular unit testing.

@natevw answer"path").on("click")();

helped a lot on mouseover event. But, applying that to mousemove was giving an e.source null error.

The work around was to set the d3 event programmatically.

d3.event = document.createEvent('MouseEvent');

Hope this helps.


You can go super manual by getting the mouse event and passing it the arguments that d3 would otherwise provide for you. This gives you a fairly clean way to do it while still using d3 constructs. For a single element use the following:

var path ='path');
path.on('click').call(path.node(), path.datum());

For multiple elements, you can trigger each one in turn:

g.selectAll('path').each(function(d, i) {'click').apply(this, arguments);

The latter can also be used for a single element if your selector is specific enough, or if you use .select() instead of .selectAll() to only return the first element.


@handler answer did not work for me entirely. It would click the svg element but additional simulated events would not register. This is what worked for me:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);


eventFire(document.getElementById(element_id), 'click');

I find next workaround:

d3.selectAll("path").each(function(d, i) {
                    onClickFunc.apply(this, [d, i]);

Where d is data and i is index this data




This answer might be somewhat unrelated - but hopefully useful to someone searching for how to invoke a click event of a SVG element - since jQuery $(mySvgElement).trigger("click") won't work.

This is how you would programmatically trigger/invoke/raise a click event for a SVG element:

var ev = document.createEvent("SVGEvents");

var target = $("svg>g>path[fill='#0011cc']").get(0); // get the SVG element here
target.dispatchEvent(ev);  // like $(target).trigger('click') - but working!

This is how I do it.

g.selectAll("path").on("click", function(d, i){
                                    my_function(d, i);

I've found the the callbacks work with anonymous functions. So for the code above, any path that is clicked will call my_function and pass in the current datum d and index i of the path that was clicked.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.