javascript - D3 : When I add a transition, 我的鼠标悬停停止工作...为什么？

Question

如有任何帮助，我们将不胜感激。

基本上，在我向折线图添加过渡之前，鼠标悬停效果很好。过渡将圆圈的不透明度从零变为一。

var dots = svg.selectAll('circle')
    .data(data)
    .enter()
    .append('svg:circle')
    .attr('cx', function(d, i){ return ((width - tickOffset) / (data.length - 1)) * i; })
    .attr('cy', function(d){ return y(d.value); })
    .attr('r', 4)
    .attr('class', 'circle')
    .style('opacity', 0)
    .transition()
    .duration(circleAnimation)
    .delay(function(d,i){ return i * (circleAnimation / 4); })
    .style('opacity', 1);

dots.on('mouseover', function(d, i){
    // show tooltip
})
.on('mouseout', function(d, i){
    // hide tooltip
});

当我实现转换时，控制台抛出以下错误

TypeError: 'undefined' is not a function (evaluating 'dots.on')

同样的问题发生在我刚刚创建的条形图上，只需停止方法链接并再次启动它就可以解决问题。这就是为什么在此示例中我停止了方法链接并使用“dots.on('mouseover...”

再次启动它

Answer 1

只要您调用 .transition()，您所选择的内容就会变成一个过渡。这是您保存在 dots 中的内容，然后尝试调用 .on() on。相反，保存选择并在其上设置转换和事件处理程序:

var dots = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('svg:circle')
  .attr('cx', function(d, i){ return ((width - tickOffset) / (data.length - 1)) * i; })
  .attr('cy', function(d){ return y(d.value); })
  .attr('r', 4)
  .attr('class', 'circle')
  .style('opacity', 0);

dots.transition()
  .duration(circleAnimation)
  .delay(function(d,i){ return i * (circleAnimation / 4); })
  .style('opacity', 1);

dots.on('mouseover', function(d, i){
    // show tooltip
  })
  .on('mouseout', function(d, i){
    // hide tooltip
  });