4

基本的に、グラフをx軸から開始し、2秒かけて実際のデータ値まで拡大する必要があります。これはおそらく単純なことですが、私はそれを機能させることができないようです。

d = ""属性が関数(area)によって構築されているarea要素を追加していますが、トランジションを追加する場所がわかりません。

最初はエリア関数でこれをやろうと思ったのですが、失敗します。また、area要素が追加されたときにこれを実行しようとしましたが成功しませんでした。

これが私のコードです:

// 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");
4

1 に答える 1

5

面グラフの形状にトランジションを使用するのではなく、アニメーション化するsvg要素全体に対してscale(x、y)変換を適用できます。このアプローチの利点は、特定のレンダリング実装に限定されないことです(例:path / d3.area固有ではありません)。

ただし、注意すべき点がいくつかあります。

  • マージン調整に取り組んでいるtransition()の動作を回避するには、transition()変換が作用するための別個の「g」要素があることを確認してください。

  • 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

于 2012-12-08T10:41:08.140 に答える