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