如何调用“点击”事件编程方式在d3？ [英] How to invoke "click" event programmatically in d3?
本文介绍了如何调用“点击”事件编程方式在d3？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想这样做（也可以在 https://gist.github.com/1703994 ）：
< pre class =snippet-code-html lang-html prettyprint-override>
<！DOCTYPE html>< html> < head> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < script type =text / javascriptsrc =http://mbostock.github.com/d3/d3.js?1.27.2>< / script> < script type =text / javascriptsrc =http://mbostock.github.com/d3/d3.time.js?1.27.2>< / script> < script type =text / javascriptsrc =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 ，h）.append（svg：g）.attr（transform，translate（+ w / 2 +，+ h / 2 +））; var g = vis.selectAll g）; append（svg：g）; g.append（svg：path）.attr（fill，红色）.attr（stroke，red）.attr（stroke-width，10）.attr（d，M 100 350 l 150 -300）g.select ）.on（click，function（）{console.log（Hello）;}）; // XXX：如何执行点击程序化？}）< / script> < div id =test>< / div> < / body>< / html>
t work
我想我们可以使用 https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on
但是如何操作呢？
解决方案
不知道为什么，但是似乎与jQuery和d3处理事件的方式的差异导致一个jQuery诱导的点击事件 $（＃some-d3-element）。click（）不分派给d3元素。
a解决方法：
jQuery.fn.d3Click = function（）{
this.each（function（i，e） {
var evt = new MouseEvent（click）;
e.dispatchEvent（evt）;
}）;
};
，然后调用：
$（＃some-d3-element）。d3Click（）;
I'm trying like that (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 doesn't work
I think we may use https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on
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");
e.dispatchEvent(evt);
});
};
and then call it:
$("#some-d3-element").d3Click();
这篇关于如何调用“点击”事件编程方式在d3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
