如何在d3中以编程方式调用“click”事件?

我想这样(也在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> 

但不行

我想我们可以使用https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on

但是怎么做呢?

不知道为什么,但似乎与jQuery和d3处理导致jQuery引发的点击事件$("#some-d3-element").click()不派遣到d3元素的事件的方式有差异。

解决方法:

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

然后调用它:

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

只需调用.on方法作为注册值(即您的处理函数)的getter,然后调用其结果:

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

如果处理程序使用绑定数据和/或事件字段,或者绑定了多个事件侦听器(例如“click.thing1”和“click.thing2”),则会变得更复杂一点。 在这种情况下,您可能最好使用标准DOM方法发射一个假事件:

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

这工作。 我使用饼图,所以我select了所有的“select”饼图片,并为每个饼图检索附加的“点击”callback(我附加了另一部分代码不包括在这里,使用D3的。 on()方法),然后在正确的上下文中调用期望的参数。

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

我来到这个线程寻找angular度unit testing的d3 mousemove事件。

@natevw的答案

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

在鼠标hover事件上帮助了很多。 但是,将其应用于mousemove会导致e.source null错误。

解决方法是以编程方式设置d3事件。

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

希望这可以帮助。

这个答案可能有点不相关 – 但希望对于search如何调用SVG元素的点击事件的人有用 – 因为jQuery $(mySvgElement).trigger(“click”)将不起作用。

这是如何以编程方式触发/调用/引发SVG元素的点击事件:

 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! 

您可以通过获取鼠标事件并将d3会为您提供的parameter passing给超级手动。 这给你一个相当干净的方式来做到这一点,同时仍然使用D3构造。 对于单个元素使用以下内容:

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

对于多个元素,可以依次触发每个元素:

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

后者也可用于单个元素,如果您的select器足够具体,或者如果您使用.select()而不是.selectAll()只返回第一个元素。

随着D3 V4你可能会想这样做:

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

参考: https : //github.com/d3/d3-selection#selection_dispatch

这是我如何做到的。

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

我发现callback工作与匿名函数。 所以对于上面的代码,任何被点击的path都会调用my_function并传递被点击的path的当前数据d和索引i

我find下一个解决方法:

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

其中d是数据,而i是索引这个数据

尝试g.select("path").trigger("click")