javascript - 无法让 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);
    }

我的问题是:为什么该地区没有人口？ var area = d3.svg.area() 内的 console.log 永远不会触发。预先感谢您的帮助。

Answer 1

您输入的数据不正确； d3.svg.area takes an array of arrays 。您可以使用 layers 变量正确生成此值，然后将它们拆分为单个数组 layers0 和 layers1。在示例中，您链接到的 layers0 和 layers1 都是数组的数组。

这是your code passing在layers变量中。