使用动态变量在d3js中设置圆半径

Question

我在 searchButton 函数中有一组数据，它调用数组中的不同数字，如下所示：values[80,20,10] 然后在我的 x 变量中，我有这个 d3js 的比例。

x = d3.scale.linear()
.domain([0, d3.max(values)])
.range([0, width]);

现在我有一个名为 grow 的函数，在其中我根据 searchbutton 函数中的值生成一组圆圈。

this.grow = grow;
function grow(size) {
  circle.attr("r",size / 5 + 10).transition().duration(2000);
}

当我使用 size 作为参数设置增长函数时，它会增长但转换根本不起作用。

Answer 1

为了使d3 转换起作用，您需要将属性从默认值开始设置为所需值。我会做什么如下：

this.grow = grow;

function grow(size) {
     circle
           .attr('r', 0)
           .transition()
           .ease('linear')
           //.ease('cubic-in-out') // default
           .duration(2000)
           .attr('r', size / 5 + 10);
}

这将使一个从 0 半径到所需半径的圆动画。您可能需要调整您的逻辑，也许您不希望默认半径（过渡前）值为 0。

您可以发fiddle 或发布您的整个代码吗？你是怎么调用grow函数的？