D3 向事件监听器添加多个函数

Question

我正在尝试向一个事件列表器添加多个函数。但它不起作用。当我点击时，它不会触发停止功能。

所以我的问题是，是否可以为一个事件赋予多个功能？还是其他问题？

<svg>
<g id="graph">
    <circle cx="16.887" cy="333.923" r="6.268"/>
    <circle cx="33.574" cy="333.923" r="6.268"/>
    <circle cx="50.262" cy="333.923" r="6.268"/>
    <circle cx="66.949" cy="333.923" r="6.268"/>
    <circle cx="167.074" cy="333.923" r="6.268"/>
    <circle cx="183.762" cy="333.923" r="6.268"/>
    <circle cx="333.387" cy="333.923" r="6.268"/>
    <circle cx="316.699" cy="333.923" r="6.268"/>
    <circle cx="300.199" cy="334.101" r="6.268"/>
    <circle cx="266.637" cy="333.923" r="6.268"/>
    <circle class="grey" cx="250.137" cy="333.923" r="6.268"/>
    <circle class="grey" cx="216.762" cy="333.923" r="6.268"/>
</g>
</svg>

<script>
var svg = d3.select("svg");
var g = svg.select("#graph");

/*[--- Give every circle/event the function stop ---]*/
g.selectAll("circle").on('mouseover',stop);
g.selectAll("circle").on('mouseout',stop);

/* [---------- mouseover and mouseout hover effect ----------]*/
svg.selectAll("circle")
.on('mouseover', function(d){
   d3.select(this)
   .transition()
   .attr ({"r": "10"})
   .style("fill", "black")
})

 .on('mouseout', function(d){
    d3.select(this)
    .transition()
    .delay(100)
    .attr ({"r": "6.268"})
    .style("fill", "#7F4292")
 })

 svg.selectAll(".grey")
 .on('mouseout', function(d){
    d3.select(this)
    .transition()
    .delay(100)
    .attr ({"r": "6.268"})
    .style("fill", "#A9A9A9")
 })
 /* [----------------------------------------------]*/


 /* [--------------- stop loop Function ----------------]*/
 function stop() {
    if(run) {
      run = false;
    }
    else {
      run = true;
    }
 }

还有一个随机放大圆圈的功能，但对于我的问题来说，这无关紧要。

Answer 1

不错不错。它在我添加 .foo.

时起作用

如果已在所选元素上为相同类型注册了事件侦听器，则在添加新侦听器之前删除现有侦听器。 要为同一个事件类型注册多个监听器，类型后面可以跟一个可选的命名空间，例如"click.foo"和"click.bar"。类型的第一部分（例如 "click"）用于注册事件侦听器（使用 element.addEventListener()），并且在所选元素上添加方法，如 __onclick.foo 和 __onclick.bar.

    /*[--- Give every circle/event the function stop ---]*/
    g.selectAll("circle").on('mouseover.foo',stop);
    g.selectAll("circle").on('mouseout.foo',stop);

D3 向事件监听器添加多个函数

D3 add more than one functions to an eventlistener

javascript

dom-events

d3.js