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

Question

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

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

现在我有一个名为“增长”的函数，在其中我根据 searchbutton 函数中的值增长了一组圆圈。

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

当我将增长函数设置为大小作为参数时，它会增长，但过渡根本不起作用。

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