How to program the "click" event programmatically in d3?

Question

How to program the "click" event programmatically in d3?

I try so hard (also at https://gist.github.com/1703994 ):

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.27.2"></script> <script type="text/javascript" src="js-libs/jquery-1.7.js"></script> <style> <!-- #test { width: 400px; height: 500px; } --> </style> </head> <body> <script type="text/javascript"> $(function() { var w = 600, h = 350; var vis = d3.select("#test").append("svg:svg") .attr("width", w) .attr("height", h) .append("svg:g") .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); var g = vis.selectAll("g") .data([ { x:1 , y: 2} ]) .enter().append("svg:g"); g.append("svg:path") .attr("fill", "red") .attr("stroke", "red") .attr("stroke-width", "10") .attr("d", "M 100 350 l 150 -300") g.select("path") .on("click", function() { console.log("Hello"); }); // XXX: how to execute click programmaticaly? }) </script> <div id="test"></div> </body> </html>

But does not work

I think we can use https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on

But how to do that?

+44

javascript d3.js

mad Jan 30 2018-12-12T00:

source share

10 answers

handler · Answer 1 · 2012-06-24 18:38

not sure why, but there seems to be a mismatch between the way jQuery and d3 handle events that trigger a jQuery event triggered by a click on $("#some-d3-element").click() to not send the d3 element.

workaround:

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

and then name it:

 $("#some-d3-element").d3Click();

natevw · Answer 2 · 2012-09-07 21:28

Just call the .on method as the receiver for the registered value (i.e. the handler function), then call the result:

 g.select("path").on("click")();

This gets a little trickier if your handler uses related data and / or event fields, or if you have multiple event listeners linked (for example, "click.thing1" and "click.thing2"). In this case, it is probably best for you to simply fire the fake event using the standard DOM methods:

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

Andrew Plank · Answer 3 · 2014-06-17 08:29

It works. I use pie charts, so I select all the “selected” pieces of cake, and for each of them it extracts the attached “click” callback (which I put into another part of the code not included here using d3. On ()) and then calling the expected parameters in the right context.

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

massanishi · Answer 4 · 2015-11-13 19:52

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

@natevw answer

 g.select("path").on("click")();

helped a lot in the mouseover event. But, applying this to mousemove gives an e.source null source error.

The work was related to the programming of the d3 event.

 d3.event = document.createEvent('MouseEvent'); d3.event.initMouseEvent("mousemove"); d3.select(elm[0]).select("rect").on("mousemove")();

Hope this helps.

Fredrik Johansson · Answer 5 · 2015-12-20 10:52

This answer may be somewhat unrelated - but hopefully useful for someone looking for a way to trigger the click event of an SVG element, since jQuery $ (mySvgElement) .trigger ("click") will not work.

This is how you programmatically fire / raise / raise the click event for an SVG element:

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

Yony · Answer 6 · 2014-09-10 20:31

You can go into the super-guide by receiving a mouse event and passing arguments to it that otherwise would have provided d3. This gives you a pretty clean way to do this while continuing to use the d3 constructs. For one item, use the following:

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

For several elements, you can run each of them in turn:

 g.selectAll('path').each(function(d, i) { d3.select(this).on('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 return only the first element.

Jonatas Walker · Answer 7 · 2016-10-27 16:01

With D3 v4, you most likely want:

 d3.select('#some-id').dispatch('click');

Ref .: https://github.com/d3/d3-selection#selection_dispatch

user1410605 · Answer 8 · 2012-05-22 15:36

This is how I do it.

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

I found that callbacks work with anonymous functions. Thus, for the code above, any path traversed will call my_function and pass the current date d and index i path that was pressed.

mad · Answer 9 · 2012-02-01 10:13

I found the following workaround:

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

Where d is data and i is the index of this data

Nabor · Answer 10 · 2012-01-30 11:55

Try g.select("path").trigger("click")

How to program the "click" event programmatically in d3?

More articles: