D3 добавить несколько функций к eventlistener

Question

Я пытаюсь добавить несколько функций к одному eventlistner. Но это не сработает. Когда я нажимаю, это не вызовет функцию остановки.

Так что мой вопрос в том, нельзя ли дать событие более чем одной функции? Или есть еще одна проблема?

<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

okay cool. он работает, когда я добавляю .foo.

Если прослушиватель событий уже зарегистрирован для одного и того же типа на выбранном элементе, существующий прослушиватель удаляется до добавления нового слушателя. Чтобы зарегистрировать несколько слушателей для одного и того же типа события, за типом может следовать необязательное пространство имен, такое как «click.foo» и «click.bar». Первая часть типа (например, «щелчок») используется для регистрации прослушивателя событий (с использованием 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);