не может получить d3.layout.stack для заполнения d3.svg.area

Question

Я пытаюсь использовать поток d3 с моими собственными данными вместо случайных данных, представленных в примере (http://bl.ocks.org/mbostock/4060954).

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

Мой вопрос: почему область не заселена? Консоль.log внутри области var = d3.svg.area() никогда не срабатывает. Спасибо заранее за любую помощь.

Answer 1

Ваши данные введены неверно; d3.svg.areatakes an array of arrays. Вы правильно генерируете это с помощью переменной layers, но затем разделите их на отдельные массивы layers0 и layers1. В примере, который вы ссылаетесь на layers0 и layers1, оба массива массивов.

Вот your code passing в переменной layers.