絶対最短d3エリアの例は何ですか？

Question

私は本当にd3のareaとstackレイアウトのものを理解するのに苦労しています。私が思ったものを最小のものにしようとしましたが、何も表示されず、実際にコンソールにエラーが表示されます。私は何を得ていないのですか？ここにコードがあります。

var svg = d3.select("body").append("svg") 
    .attr("width", 400) 
    .attr("height", 300) 

var testData = [ 
    [ 0, 10], 
    [10, 20], 
    [20, 30], 
    [30, 20], 
]; 

svg.selectAll("path.area") 
    .data(testData) 
    .enter().append("path") 
    .style("fill", "#ff0000") 
    .attr("d", d3.svg.area()); 

Answer 1

データの次元が正しくありません。あなたが選択した3D配列をバインドする必要があることを意味

"M0,10L10,20L20,30L30,20L30,0L20,0L10,0L0,0Z" 

：中

d3.svg.area()([[ 0, 10], [10, 20], [20, 30], [30, 20]]) 

結果：各エリアのパスは、このような2次元配列を、必要とします。次に、選択内の各要素（すなわちパス）は2D配列を受け取る。

複数の領域を作成することを想像して、何が起こっているのかを簡単に説明できます。それから、それは次のようになります：

var testData1 = [ 
    [ 0, 10], 
    [10, 20], 
    [20, 30], 
    [30, 20], 
]; 

var testData2 = [ 
    [100, 110], 
    [110, 120], 
    [120, 130], 
    [130, 120], 
]; 

svg.selectAll("path.area") 
    .data([testData1, testData2]) 
    .enter().append("path") 
    .style("fill", "#ff0000") 
    .attr("class", "area") 
    .attr("d", d3.svg.area());