D3エリアグラフアニメーション

Question

私はエリアグラフを持っています（js fiddle https://jsfiddle.net/o7df3tyn/参照）このエリアグラフをアニメーションしたいと思います。私はthis 問題のアプローチを試してみましたが、このdoesntのは、私が

var numberOfDays = 30; 

var vis = d3.select('#visualisation'), 
     WIDTH = 1000, 
     HEIGHT = 400, 
     MARGINS = { 
      top: 20, 
      right: 20, 
      bottom: 20, 
      left: 50 
     }; 

    var drawArea = function (data) { 
     var areaData = data; 
     // var areaData = data.data; 
     var xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0, numberOfDays + 1]), 
      yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([_.min(areaData), _.max(areaData)]); 

     var area = d3.svg.area() 
      .interpolate("monotone") 
      .x(function(d) { 
       return xRange(areaData.indexOf(d)); 
      }) 
      .y0(HEIGHT) 
      .y1(function(d) { 
       return yRange(d); 
      }); 

     var path = vis.append("path") 
     .datum(areaData) 
     .attr("fill", 'lightgrey') 
     .attr("d", area); 
     }; 
var data = [1088,978,1282,755,908,1341,616,727,1281,247,1188,11204,556,15967,623,681,605,7267,4719,9665,5719,5907,3520,1286,1368,3243,2451,1674,1357,7414,2726]  
drawArea(data); 

は、だから私はカーテンのアプローチを使用するカント同じSVG要素でより多くの折れ線グラフを持っているので助けているようです。 下から領域をアニメーション化したいと思います。 アイデア/説明はありますか？

誰かが同じ問題を抱えている場合でも、@thatOneGuyは正確な問題を釘付けにしました。私の更新フィドルは、あなたが今、試してみることができ、ここでhttps://jsfiddle.net/sahils/o7df3tyn/14/

Answer 1

他の回答はOKですが、これはグラフをアニメートしません。

ここで私はそれをやります。

アニメーショントゥイーンをパスに追加して、0からパス上のポイントにトゥイーンさせます。

そうような何か：あなたが働いていなかった理由は、このためのラインであった

//create an array of 0's the same size as your current array : 

    var startData = areaData.map(function(datum) { 
     return 0; 
     }); 

//use this and tween between startData and data 

var path = vis.append("path") 
    .datum(startdata1) 
    .attr("fill", 'lightgrey') 
    .attr("d", area) 
    .transition() 
    .duration(1500) 
    .attrTween('d', function() { 
     var interpolator = d3.interpolateArray(startData, areaData); 
     return function(t) { 
     return area(interpolator(t)); 

     } 
    }); 

：この時点で

.x(function(d) { 
     return xRange(areaData.indexOf(d)); 
    }) 

dは0との現在の作品の間の値でありますデータなので、areaData.indexOf(d)は機能しません。

ただ、この変更：https://jsfiddle.net/thatOneGuy/o7df3tyn/17/

Answer 2

https://jsfiddle.net/DavidGuan/o7df3tyn/2/

vis.append("clipPath") 
    .attr("id", "rectClip") 
.append("rect") 
    .attr("width", 0) 
    .attr("height", HEIGHT); 

です。私たちは下からの領域を成長する場合
：

は

var path = vis.append("path") 
    .datum(areaData) 
    .attr("fill", 'lightgrey') 
    .attr("d", area) 
    .attr("clip-path", "url(#rectClip)") 

この場合、あなたは

を非表示にするSVG要素にアップデートをクリップパスattrを追加覚えておいてください

vis.append("clipPath") 
    .attr("id", "rectClip") 
.append("rect") 
    .attr("width", WIDTH) 
    .attr("height", HEIGHT) 
    .attr("transform", "translate(0," + HEIGHT + ")") 

d3.select("#rectClip rect") 
    .transition().duration(6000) 
    .attr("transform", "translate(0," + 0 + ")")