D3 .transition（）在onmouseover上不适用于圆形元素

Question

我正在尝试完成一些相当简单的事情。 我想要带有不可见数据点的折线图。 当鼠标光标触摸该行时，这些不可见的数据点应变为可见。 我希望这些圆圈可以平滑显示，因此我一直在尝试向线条mouseover方法添加过渡效果。 另外，如果用户将鼠标悬停在一个特定的数据点上，则会出现一个工具提示，说明数据点的值（例如，日期和给定度量的值）。 理想情况下，我希望这些圆以半径0开始，并且当触摸线时，半径应在给定时间内增长到某个值

datapoints.transition().duration(500).attr("r", 5);

当圆盘悬停时，我希望其半径增加一点（例如，在圆盘上的onmouseover方法中）。

d3.select(this).transition().duration(500).attr("r", 7);

哪个没有用。 但是可以只设置

d3.select(this).attr("r", 7);

圆上的onmouseover方法中的新半径，但是正如我之前所说的，我希望它是一个平滑的过渡，并且我已经看到了更高级的绘图方法。

由于无法正常工作，我尝试了下一个最好的方法，因此我最终完全不使用任何转换，并且能够使图表看起来像jsFiddle 。 不幸的是，我的经历非常不稳定……我希望我错过了一些非常明显的东西，希望有人可以帮助我解决这个问题。

Answer 1

这个：

d3.select(this).transition().duration(500).attr("r", 7);

为我工作。 这里的问题可能是在500毫秒内从3半径过渡到7半径并不是全部可察觉的。

就是说，我对您的示例采取了一些自由态度，并提出了这个示例 。 我认为它看起来很酷。

.on("mouseover", function (d) {
   brandPoints.transition().duration(500)
     .attr("r", 10)
     .each("start", function() {  
       d3.select(this).style("visibility", "visible"); 
   });
   d3.select(this).transition().duration(500).attr("r", 20);

 ...

.on("mouseout", function () {
   brandPoints.transition().duration(500)
     .attr("r", 2)
     .each("end", function() { 
       d3.select(this).style("visibility", "hidden"); 
      });
 ...