SVG路徑元素.transition（） - 在哪里添加？

Question

基本上，我希望我的圖形從x軸開始，並在兩秒內增長到實際數據值。 這可能是一件簡單的事情，但我似乎無法讓它發揮作用。

我附加了一個區域元素，其中d =“”屬性是由函數（區域）構建的，我不知道在哪里添加轉換。

首先，我想在區域函數中執行此操作，但這失敗了。 當添加區域元素但沒有成功時，我也試圖這樣做。

這是我的代碼：

// Create the area element for each object - a function that will be passed to "path"
var area = d3.svg.area()
    .x(function(d) { return x(d.year); })
    .y0(height)
    //.y1(height)
    //.transition()
    //.duration(2000)
    .y1(function(d) { return y(d.average); });

// build the container SVG element
var svg = d3.select("#co2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

svg.append("path") 
    // pull in data to the path 
    .datum(data)
    .attr("class", "area")
    // passing in the area function, for each object
    .attr("d", area)
    // starts the graph opacity at 0 and fades to 1 over 2.5 seconds
    .style("fill-opacity", "0")
    .transition()
    .duration(2500)
    .style("fill-opacity", "1");

Answer 1

您可以對要設置動畫的整個svg元素應用縮放（x，y）變換，而不是嘗試在區域圖的形狀上使用過渡。 這種方法的優點是它不限於特定的渲染實現（例如：not path / d3.area specific）。

但有幾點需要注意：

• 要避免transition（）行為，處理邊距調整，請確保您有一個單獨的'g'元素用於transition（）轉換以執行操作

• SVG的左上角有原點（0,0），因此除了縮放SVG區域外，還需要設置圖形的基數

這在下面匯總：

'g'元素：

var svg = d3.select("#co2").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
      .attr("transform", "translate(" + margin.left, "," + margin.top + ")")
    // define a new 'g' to scope the transition, and keep separate from the margin adjusting transform above
    .append("g"); 

transition（）包括基本調整：

svg
  .attr("transform", "translate(0," + height + ") scale(1, 0)")
.transition().duration(2000)
  .attr("transform", "translate(0,0) scale(1, 1)");

與以往一樣，最好用完整的例子來說明這一點： http ： //bl.ocks.org/4239516