使用動態變量在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);
}

當我將增長函數的大小設置為參數時，它會增長，但過渡對它完全無效。

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。

您可以擺弄小玩意還是發布整個代碼？ 您如何稱呼grow功能？