Question

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

但怎么办呢？

Answer 1

不确定原因，但似乎与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();

Answer 2

只需将.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);

Answer 3

这很有效。我使用饼图，所以我选择所有＆＃34;选择＆＃34;馅饼切片，并为他们每一个，检索附加的＆＃34;点击＆＃34;回调（我已经附加在此处未包含的代码的另一部分，使用d3＆＃39; .on（）方法），然后在正确的上下文中使用预期参数进行调用。

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

Answer 4

使用 D3 v4 ，您可能会想要这样：

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

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

Answer 5

我来到这个线程寻找角度单元测试的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")();

希望这有帮助。

Answer 6

这个答案可能有点不相关 - 但希望对于搜索如何调用SVG元素的click事件的人有用 - 因为jQuery $（mySvgElement）.trigger（＆＃34; click＆＃34;）赢得了＆＃39;工作。

这是以编程方式触发/调用/引发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!

Answer 7

你可以通过获取鼠标事件并传递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()仅返回第一个元素，后者也可以用于单个元素。

Answer 8

@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');

Answer 9

我就是这样做的。

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

我发现回调可以使用匿名函数。因此，对于上面的代码，单击的任何路径都将调用my_function并传入所单击路径的当前基准d和索引i。

Answer 10

我找到了下一个解决方法：

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

其中d是数据，i是索引此数据

Answer 11

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

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

11 个答案: