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

为什么，但似乎与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();

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

使用 D3 v4，您可能需要这样做：

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

编号： https://github.com/d3/d3-selection#selection_dispatch

这有效。我正在使用饼图，所以我选择了所有"选定的"饼图扇区，并为每个饼图检索附加的"click"回调(我已经附加了此处未包含的另一部分代码，使用 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!

我来这个线程是为了寻找用于角度单元测试的 d3 鼠标移动事件。

@natevw答案

g.select("path").on("click")();

在鼠标悬停事件上帮助很大。但是，将其应用于鼠标移动会给出一个 e.source null 错误。

解决方法是以编程方式设置 d3 事件。

d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();

希望这有帮助。

您可以通过获取鼠标事件并向其传递 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.selectAll("path").each(function(d, i) {
                    onClickFunc.apply(this, [d, i]);
                });

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

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