基本的に、グラフを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");