Question

我正在努力完成一些相当简单的事情。我想要一个带有不可见数据点的折线图。当鼠标光标接触到该线时，这些不可见的数据点应该变得可见。我希望这些圆圈看起来很流畅，因此我一直在尝试向线鼠标悬停方法添加过渡。此外，如果用户悬停在一个特定数据点上，则应显示工具提示，说明数据点值（例如，给定度量的日期和值）。理想情况下，我希望这些圆圈从半径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，并不是所有可察觉的。

那就是说，我对你的例子come up with this example采取了一些自由。我觉得它看起来很酷。

.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"); 
      });
 ...

D3 .transition（）不在圆元素onmouseover上工作

1 个答案: