無法獲得d3.layout.stack填寫d3.svg.area

Question

我想用我自己的數據而不是示例中提供的隨機數據（http://bl.ocks.org/mbostock/4060954）使用d3 streamgraph。

var d3Data = [ 
       {"label" : 0, "value1":105, "value2":95}, 
       {"label" : 1, "value1":95, "value2":115}, 
       {"label" : 2, "value1":85, "value2":75}, 
       {"label" : 3, "value1":75, "value2":175}, 
       {"label" : 4, "value1":85, "value2":75}, 
       {"label" : 5, "value1":85, "value2":75}, 
       {"label" : 6, "value1":85, "value2":75}, 
       {"label" : 7, "value1":85, "value2":75} 
      ]; 

    var n = 2, // number of layers 
    m = d3Data.length, // number of samples per layer 
    layers = d3.layout.stack().offset("wiggle")(["value1", "value2"].map(function(layer) { 
     return d3Data.map(function(d) { 
      return {x: d.label, y: +d[layer]}; 
     }); 
    })); 
    console.log(layers); 
    var layers0 = layers[0], 
    layers1 = layers[1]; 

    var width = 960, 
    height = 500; 

    var x = d3.scale.linear() 
    .domain([0, m - 1]) 
    .range([0, width]); 
    var y = d3.scale.linear() 
    .domain([0, d3.max(layers, function(layer) { return d3.max(layer, function(d) { console.log(d.y); return d.y0 + d.y; }); })]) 
    .range([height, 0]); 


    var color = d3.scale.linear() 
    .range(["#aad", "#556"]); 

    var area = d3.svg.area() 
    .x(function(d) { console.log(d.x); return x(d.x); }) 
    .y0(function(d) { return y(d.y0); }) 
    .y1(function(d) { return y(d.y0 + d.y); }); 

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

    svg.selectAll("path") 
    .data(layers0) 
    .enter().append("path") 
    .attr("d", area) 
    .style("fill", function() { return color(0.5); }); //Math.random() 

    function transition() { 
    d3.selectAll("path") 
     .data(function() { 
     var d = layers1; 
     layers1 = layers0; 
     return layers0 = d; 
     }) 
    .transition() 
     .duration(2500) 
     .attr("d", area); 
    } 

我的問題是：爲什麼該區域沒有填充？ var area = d3.svg.area（）中的console.log從不觸發。預先感謝您的任何幫助。

Answer 1

您輸入的數據不正確; d3.svg.areatakes an array of arrays。你用你的layers變量正確地產生了這個，但是然後將它們分成單個陣列layers0和layers1。在這個例子中，你鏈接到layers0和layers1都是數組的數組。

這裏的your code passing在layers變量中。