D3区域图动画

Question

我有一个区域图（请参阅js小提琴https://jsfiddle.net/o7df3tyn/）我想为该区域图创作动画。我试着在this 问题的办法，但是这似乎没有帮助，因为我已经在

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

其他答案是好的，但这不会动画图。

这是我该怎么做的。

我会将补间动画添加到路径中，以便它从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)将不起作用。

只要改变这一点：

.x(function(d,i) { 
     return xRange(i); 
    }) 

这将沿x轴:)

更新小提琴增加：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); 

您可以试试了。

记住添加到你想隐藏

在这种情况下，SVG元素夹路径attr

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

更新：
如果我们想从底部生长的区域：

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 + ")")