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

我在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);
}

当我将增长函数的大小设置为参数时，它会增长，但过渡对它完全无效。

最佳答案

为了使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函数？