Question

非常感谢任何帮助。

基本上，鼠标悬停工作正常，直到我添加到折线图的过渡。过渡需要圈子＆＃39;不透明度从零到一。

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

同样的问题发生在我刚创建的条形图上，只是停止方法链接并再次启动它修复了问题。这就是为什么在这个例子中我已经停止了方法链接并再次使用＆＃34; dots.on（＆＃39; mouseover ...＆＃34;

Answer 1

只要您拨打.transition()，您所选择的选项就会成为过渡。这是您在dots中保存的内容，然后尝试拨打.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
  });

D3：当我添加转换时，我的鼠标停止工作......为什么？

1 个答案: