D3 Flächendiagrammanimation

Question

Ich habe ein Flächendiagramm (siehe js fiddle https://jsfiddle.net/o7df3tyn/) Ich möchte dieses Flächendiagramm animieren. Ich versuchte, den Ansatz in this Frage, aber das scheint nicht zu helfen, weil ich mehr Liniendiagramme im gleichen svg Elemente habe

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); 

So kippe ich den Vorhang Ansatz. Ich möchte den Bereich von unten animieren. Irgendwelche Ideen/Erklärungen?

Nur für den Fall, dass jemand anderes in dem gleichen Problem steckte, @thatOneGuy das genaue Problem genagelt. Meine aktualisiert Geige ist hier https://jsfiddle.net/sahils/o7df3tyn/14/

Answer 1

Die andere Antwort ist in Ordnung, aber das Diagramm wird nicht animiert .

Hier ist, wie ich es tun würde.

Ich würde ein Animations-Tween zum Pfad hinzufügen, so dass es zwischen 0 und dem Punkt auf dem Pfad tween wird.

So etwas so:

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

     } 
    }); 

Der Grund, warum Ihr nicht wegen dieser Linie war arbeitete:

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

d an dieser Stelle ein Wert zwischen 0 und das aktuelle Stück Daten, so areaData.indexOf(d) wird nicht funktionieren.

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

Diese entlang der x-Achse :)

Aktualisiert Geige wird erhöht:

Nur soviel ändern 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); 

Sie jetzt einen Versuch haben.

Denken Sie daran, Clip-Pfad attr den SVG-Elemente Sie

In diesem Fall

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

aktualisieren ausblenden möchten hinzufügen:
Wenn wir den Bereich von unten wachsen wollen:

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