Question

我努力在d3中实现简单的连续转换 - 当我将鼠标悬停在某个节点上时，我希望不同圆圈的笔划（在页面上的其他位置固定）在2到4之间转换，返回无限期地，直到徘徊结束。

我在这里发现了一篇非常接近的帖子：Increase and decrease radius of a circle using d3 transition。特别是最后一条链接到连续脉冲效应的注释：http://bl.ocks.org/chiester/11267307。

基于该实现，我的节点悬停功能的内部看起来像这样......

d3.selectAll('.fixedCircles').each( 
   function (d) {
       if (d.name == "circleToPulse") { //selects the circle I want to pulse, since there's lots of fixed circles

            //this correctly returns the stroke-width of the circle I want to pulse
            var currentStrokeWidth = d3.select(this).attr("stroke-width"); 

            //if I un-comment this, it will correctly update the circle I want to pulse
            //d3.select(this).transition().duration(500).attr('stroke-width', 15); 

            var theCircle = d3.select(this);                            

            repeat();
            function repeat() {
                theCircle = theCircle.transition()
                         .duration(500)
                         .attr("stroke-width", currentStrokeWidth+2) 
                         .transition()
                         .duration(500)
                         .attr('stroke-width', currentStrokeWidth)
                         .ease('sine')
                         .each("end", repeat);
            }
        }
    }
);

使用此解决方案，没有任何反应。我试过更改笔画宽度大小，以防+2过于微妙，但仍然没有任何反应。我之所以感到困惑的原因是，我可以正确地更新重复函数之外的固定节点笔划宽度，如我的注释代码所示。

非常感谢任何人对我在这里做错了什么的想法 - 谢谢！

d3圆脉冲的连续转换

0 个答案: