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

时间:2014-03-18 15:58:02

标签: javascript arrays d3.js

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

当我将grow函数设置为size,作为它增长的参数但转换根本不起作用。

1 个答案:

答案 0 :(得分:0)

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