如何在d3中以编程方式调用“click”事件？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在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();
我找到下一个解决方法：
d3.selectAll("path").each(function(d, i) {
onClickFunc.apply(this, [d, i]);
});
其中d是数据，i是这个数据的索引
试试g.select("path").trigger("click")
只需调用.on方法作为注册值的getter（即你的处理函数），然后调用结果：
g.select("path").on("click")();
如果你的处理程序使用绑定的数据和/或事件字段，或者你有多个事件监听器绑定（例如“click.thing1”和“click.thing2”），它会变得有点复杂。在这种情况下，你可能最好只使用standard DOM methods发射假事件：
var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true, /* ... */);
g.select("path").node().dispatchEvent(e);
这有效。我正在使用饼图，所以我选择所有“选定的”饼图片，并为每个片段检索附加的“点击”回调（我已经附加在此处未包含的代码的另一部分，使用d3）。 on（）方法）然后在正确的上下文中使用预期的参数进行调用。
d3.selectAll("g.selected").each(function(d, i) {
var onClickFunc = d3.select(this).on("click");
onClickFunc.apply(this, [d, i]);
});
使用D3 v4，您可能会想要这样：
d3.select('#some-id').dispatch('click');
参考：https://github.com/d3/d3-selection#selection_dispatch
我来到这个线程寻找角度单元测试的d3 mousemove事件。
@natevw回答
g.select("path").on("click")();
在mouseover事件上有很多帮助。但是，将其应用于mousemove会产生e.source null错误。
解决方法是以编程方式设置d3事件。
d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();
希望这可以帮助。
这个答案可能有点不相关 - 但希望对于搜索如何调用SVG元素的click事件的人有用 - 因为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为你提供的参数来超级手动。这为您提供了一种相当干净的方法，同时仍然使用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()来仅返回第一个元素，则后者也可以用于单个元素。
@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');
我就是这样做的。
g.selectAll("path").on("click", function(d, i){
my_function(d, i);
});
我发现回调可以使用匿名函数。因此，对于上面的代码，任何被单击的路径都将调用my_function并传入当前数据d并索引所单击路径的i。
以上是关于如何在d3中以编程方式调用“click”事件？的主要内容，如果未能解决你的问题，请参考以下文章