Javascript 如何调用；点击"；在d3中以编程方式处理事件？

我正试着这样做（也是在）：

$（函数（）{
var w=600，
h=350；
var vis=d3.选择（“测试”）.追加（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换”（+w/2+）、“+h/2+”）；
var g=相对于selectAll（“g”）
.data（[{x:1，y:2}]）
.enter（）.append（“svg:g”）；
g、 追加（“svg:path”）
.attr（“填充”、“红色”）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，“10”）
.attr（“d”，“M 100 350 l 150-300”）
g、 选择（“路径”）
.on（“click”，function（）{console.log（“Hello”）；}）；
//XXX：如何执行点击编程？
})

尝试

g.select（“path”）。触发（“click”）

尝试

g.select（“path”）。触发（“click”）

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

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

d3.选择全部（“路径”）。每个（函数（d，i）{
onClickFunc.apply（这个[d，i]）；
});

---

其中，

d

是数据，

i

是索引此数据

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

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

d3.选择全部（“路径”）。每个（函数（d，i）{
onClickFunc.apply（这个[d，i]）；
});

其中，

d

是数据，

i

是索引此数据

这就是我如何做的

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

我发现回调可以使用匿名函数。因此，对于上面的代码，单击的任何路径都将调用

my_函数

，并传入单击路径的当前数据

d

和索引

i

。

我就是这样做的

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

---

我发现回调可以使用匿名函数。因此，对于上面的代码，单击的任何路径都将调用

my_函数

，并传入被单击路径的当前数据

d

和索引

i

。

不确定原因，但jQuery和d3处理事件的方式似乎存在差异，导致jQuery引发的单击事件

$（“#some-d3-element”）。单击（）

不分派到d3元素

解决办法：

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

然后称之为：

$("#some-d3-element").d3Click();

---

不确定原因，但jQuery和d3处理事件的方式似乎存在差异，导致jQuery引发的单击事件

$（“#some-d3-element”）。单击（）

不分派到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”），则会变得更复杂一些。在这种情况下，您最好使用以下命令触发一个假事件：

---

只需调用

.on

方法作为注册值（即处理程序函数）的getter，然后调用该方法的结果：

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

如果处理程序使用绑定的数据和/或事件字段，或者绑定了多个事件侦听器（例如“click.thing1”和“click.thing2”），则会变得更复杂一些。在这种情况下，您最好使用以下命令触发一个假事件：

---

这很有效。我使用的是饼图，所以我选择了所有“选定”的饼图切片，对于每一个饼图切片，检索附加的“单击”回调（我在这里没有包含的另一部分代码中附加了这个回调，使用d3的.on（）方法），然后在正确的上下文中使用预期的参数进行调用

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

---

这很有效。我使用的是饼图，所以我选择了所有“选定”的饼图切片，对于每一个饼图切片，检索附加的“单击”回调（我在这里没有包含的另一部分代码中附加了这个回调，使用d3的.on（）方法），然后在正确的上下文中使用预期的参数进行调用

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

---

通过获取鼠标事件并将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（）

只返回第一个元素，则后者也可以用于单个元素。

您可以通过获取鼠标事件并将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（）

仅返回第一个元素，则后者也可用于单个元素。

我来此线程是为了寻找用于角度单元测试的d3 mousemove事件

@纳特沃回答

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

在鼠标悬停事件上帮了很多忙。但是，将其应用于mousemove会产生一个e.source空错误

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

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

---

希望这有帮助。

我来这里是为了寻找d3 mousemove事件，用于角度单元测试

@纳特沃回答

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

在鼠标悬停事件上帮了很多忙。但是，将其应用于mousemove会产生一个e.source空错误

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

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

---

希望这会有所帮助。

这个答案可能有些不相关，但希望对搜索如何调用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!

---

这个答案可能有些不相关，但希望对正在搜索的人有用