D3.JS

Question

使用面積圖啓動轉換和動畫我想讓區域圖在程序開始時從左到右「繪製」自己。我的圖中已經有一行這樣做了，但是我無法獲得該行下面的區域來正確設置動畫，或者在頁面首次啓動時「繪製」自己。目前，這是我在我的領域。

var area = d3.svg.area() 
    .x(function(d) {return xScale(d.date); }) 
    .y0(line_chart_height) 
    .y1(function(d) {return yScale(d.close); }); 

line_chart.append("path") 
    .datum(data) 
    .attr("class", "area") 
    .attr("d", area) 

我可以得到面積達有罰款和拿捏很好，但我不能讓這個網頁時首先加載區域將主要由左到右像一條線「畫」本身在這個例子中，除了從左到右，不是從右到左。

任何幫助表示讚賞，我試過使用以下，它並沒有爲我工作。

.datum(data) 
.transition().duration(2500) 
.attr("d", area) 

由於提前， 山姆

Answer 1

考慮使用svg clipPath，即：

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

然後，您可以通過轉變在頁面加載剪切路徑模擬項目的圖紙：

d3.select("#rectClip rect") 
    .transition().duration(3000) 
    .attr("width", width); 

這裏是一個例子jsfi ddle：http://jsfiddle.net/qAHC2/688/。