d3: несколько задач, отвечающих одному событию

Question

На мыши, мне нужен путь, который я нарисовал для изменения цвета, и всплывающая подсказка для показа. Я могу заставить каждого из них отвечать отдельно, но не может заставить их отвечать одновременно. Вот моя попытка:

train.append("path") 
     .attr("d", function(d) { return line(d.coordinates); }) // d.coordinates is a list of coordinates 
     .style("stroke-width", 1) 
     .style("stroke", "black") 
     .style("fill", "none") 
     .on("mouseover", function() { 
       d3.select(this) 
        .style("stroke", "red"); 

       tip.show; 
      }) 
     .on("mouseout", function() { 
       d3.select(this) 
         .style("stroke", "black"); 
       tip.hide; 

      }); 

Предложения высоко оценены!

Answer 1

Вы должны позвонить по телефону tip.show/tip.hide. Обязательно передайте ему данные (d) и индекс (i) с обратного вызова .on.

.on("mouseover", function (d,i) { 
    d3.select(this) 
    .style("stroke", "red"); 
    tip.show(d, i); //<-- the parenthesis are calling the function 
}) 
.on("mouseout", function() { 
    d3.select(this) 
    .style("stroke", "black"); 
    tip.hide(d, i); 
});