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

IT技术 javascript d3.js
2021-02-10 08:25:46

我正在尝试这样（也在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

但是怎么做呢？

6个回答

不知道为什么，但 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();
我收到此错误：超出最大调用堆栈大小。如何解决这个问题？
2021-03-30 08:25:46
太好了，但是你能帮我吗，我现在想右键单击（（（你能改进你的答案吗，谢谢。
2021-04-05 08:25:46

只需将该.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);
对于使用@natevw 解决方案后一种的任何人，我使用window, 1. 整个调用看起来像：e.initUIEvent("click", true, true, window, 1);
2021-03-17 08:25:46
使用第一种方法，你会得到错误的“这个” - 请参阅 Andrew Plank 的答案以进行修复。
2021-03-27 08:25:46

使用D3 v4，您可能需要：

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

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

这是截至 2020 年 9 月的最佳答案
2021-03-27 08:25:46
如果你需要从一组基于某种条件的元素选择单个元素，你可以链中的选择到这样的全选：d3.selectAll('.some-class').select(function(d){ if (condition === true) { return this } }).dispatch('click');。
2021-04-06 08:25:46

这有效。我正在使用饼图，所以我选择了所有“选定的”饼图，并为每个饼图检索附加的“点击”回调（我已附加到此处未包含的另一部分代码中，使用 d3 的 . on() 方法），然后在正确的上下文中使用预期的参数进行调用。

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

这个答案可能有点无关 - 但希望对搜索如何调用 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!
其它你可能感兴趣的问题
上一篇创建多维数组的副本，而不是引用 - JavaScript 下一篇Javascript调用嵌套函数