在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

为了使grow转换起作用，您需要从默认值到所需值为属性设置动画。我要做的是：

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函数？