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

问题描述：

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

所以我的问题是，是不是可以给一个事件多个功能？还是有另一个问题？

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

还有一个功能是随机放大圆圈。但对于我的问题，这并不重要。问候

我推荐阅读[文档】（https://github.com/mbostock/d3/wiki/Selections#on） - >'如果事件侦听器已经注册了相同类型的所选择的元素，在添加新侦听器之前删除现有侦听器。为相同的事件类型注册多个侦听器...' – Mark

答

好凉。它适用于我添加.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向事件监听器添加多个函数

相关推荐