如何在 d3 中以編程方式調用“click”事件？
[英]How to invoke "click" event programmatically in d3?
問題描述
我正在嘗試這樣（也在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
但是怎么做呢？
11 個解決方案
解決方案1
87 2012-06-24 18:38:42
不知道為什么，但 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();
解決方案2
70 2012-09-07 21:28:10
只需調用.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);
解決方案3
26 2016-10-27 16:01:25
使用D3 v4，您可能需要：
d3.select('#some-id').dispatch('click');
解決方案4
14 2014-06-17 08:29:41
這有效。 我正在使用餅圖，因此我選擇了所有“選定的”餅圖，並為每個餅圖檢索附加的“單擊”回調（我已附加到此處未包含的另一部分代碼中，使用 d3 的 . on() 方法），然后在正確的上下文中使用預期的參數進行調用。
d3.selectAll("g.selected").each(function(d, i) {
var onClickFunc = d3.select(this).on("click");
onClickFunc.apply(this, [d, i]);
});
解決方案5
8 2015-12-20 10:52:56
這個答案可能有點無關 - 但希望對搜索如何調用 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!
解決方案6
4 2015-11-13 19:52:52
我來到這個線程尋找用於角度單元測試的 d3 mousemove 事件。
@natevw 回答
g.select("path").on("click")();
對鼠標懸停事件有很大幫助。 但是，將其應用於 mousemove 會產生 e.source null 錯誤。
解決方法是以編程方式設置 d3 事件。
d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();
希望這可以幫助。
解決方案7
0 2014-09-10 20:31:35
您可以通過獲取鼠標事件並向其傳遞 d3 否則會為您提供的參數來進行超級手動操作。 這為您提供了一種相當干凈的方法，同時仍然使用 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()而不是.selectAll()只返回第一個元素，后者也可以用於單個元素。
解決方案8
0 2018-06-12 21:18:35
@handler 的回答完全不適合我。 它會單擊 svg 元素，但不會注冊其他模擬事件。 這對我有用：
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
用法：
eventFire(document.getElementById(element_id), 'click');
解決方案9
-1 2012-05-22 15:36:54
我就是這樣做的。
g.selectAll("path").on("click", function(d, i){
my_function(d, i);
});
我發現回調可以使用匿名函數。 所以對於上面的代碼，任何被點擊的路徑都會調用my_function並傳入被點擊路徑的當前數據d和索引i 。
解決方案10
-2 2012-02-01 10:13:23
我找到下一個解決方法：
d3.selectAll("path").each(function(d, i) {
onClickFunc.apply(this, [d, i]);
});
其中d是數據， i是索引此數據
解決方案11
-5 2012-01-30 11:55:16
試試g.select("path").trigger("click")
如何以編程方式觸發D3拖動事件？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.