Question

目前，我有一个区域图，显示了几条数据路径的区域。但是，我正在寻找一种方法将其转换为堆积区域图表。基本上，我希望将数据集堆叠在一起，以便它们可见，并且不会被其他更大的区域隐藏。

我找到了两个例子：http://bl.ocks.org/mbostock/3885211和http://bl.ocks.org/mbostock/3020685。我遇到的问题是我的数据格式非常不同，我也不确定d3实际上是如何实现的。从概念上讲，我很难理解d3在幕后做了什么。我的理解是它正在计算添加的最后一层之间的差异，但似乎可以在不使用堆栈的情况下完成。

我的数据结构如下：

// datasets { data1: Array[10], data2: Array[10], data3: Array[10] }
// data1 [{value: 2340234, year: 1945}...]

绘图功能是：

function draw(series) {
  var data1 = [];
  var data2 = [];
  var data3 = [];
  var prop = 0;

  for (prop in series) {
    var current = series[prop];

    data1.push({value: current.data1, year: current.year});
    data2.push({value: current.data2, year: current.year});
    data3.push({value: current.data3, year: current.year});
  }

  var datasets = {
    data1: data1,
    data2: data2,
    data3: data3
  };

  // updated
  var layers = [datasets.data1, datasets.data2, datasets.data3];

  var height = 800;
  var width = window.innerWidth - 100;

  var x = d3.time.scale()
      .range([0, width]);

  var y = d3.scale.linear()
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

  // updated
  var stack = d3.layout.stack()
      .values( function(d) { return d.values; });
      /

  var stacked = stack(layers.map( function(layer) {
    return {
      values: layer.map( function(d) {
        return { year: new Date(d.year, 0), y: +d.value};
      })
    };
  }));

  var area = d3.svg.area()
      .x( function(d) { 
           console.log( x(d.year) + ' is the result of x(d.year)' )
           return x(d.year); 
        })
        // d.year is defined correctly 
      .y0(height)
      .y1( function(d) { 
            console.log( y(d.value) + ' is the result of y(d.value)' )
           return y(d.value); 
         }); 
        // d is Object {year: Sat Jan 01 2005 00:00:00 GMT-0800 (PST), y: 47390331, y0: 0}
        // here y(d.value) returns NaN for some reason

  var svg = d3.select('body').append("svg")
    .append("g")
      .attr("transform", "translate(" + 120 + "," + 30 + ")");

  // Calculate max value
  var maxY = 0;
  var minY = 0;
  series.forEach( function(object) {
    for (var key in object) {
      if (object[key] > maxY) {
        maxY = object[key];
      }
    }
  });

  // Calculate min value
  series.forEach( function(object) {
    for (var key in object) {
      if (object[key] < minY) {
        minY = object[key];
      } else if (minY === 0) {
        continue;
      }
    }
  });

  var minYear = new Date("1945");
  var maxYear = new Date("2015");

  x.domain([minYear, maxYear]);
  y.domain([minY, maxY]);

  svg.append("path").data(stacked)
    .attr('d', function(d) { return area(d.values); });

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

}

将此转换为堆积区域图表的最佳方法是什么？

修改

固定。解决方案包括计算区域，如示例中所示：

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

Answer 1

快速飞越你需要做的事情：

创建合适的堆栈生成器：

var stack = d3.layout.stack()
    .values(function(d) { return d.values; });

通过堆栈生成器运行数据。您应该为生成器提供一个＆＃34;层的数组＆＃34;。对于下面的示例，我假设发生了layers = [datasets.data1, datasets.data2, datasets.data3]之类的事情。

  var stacked = stack(layers.map(function(layer) {
    return {
      values: layer.map(function(d) {
        return {year: new Date(d.year, 0), y: +d.value};
      })
    };
  }));

values键与设置生成器时使用的密钥相同。如果在以后的绘图过程中需要它们，可以向此对象添加更多内容。

创建堆叠数据后，通过区域生成器运行它：

svg.append("path")
  .data(stacked)
  .attr("d", function(d) { return area(d.values); });

在您使用.datum(datasets[data])的原始代码中 - 如果需要，您可以继续执行此操作，但for循环将需要在堆叠数据上运行：

for (var data in stacked) { ...

但是，我建议尽可能使用.data而不是.datum。在将原始数据集发送到d3生成器之前，您会对原始数据集执行大量操作，但我怀疑大部分操作都是不必要的或重复的。你应该能够得到一些看起来像的东西：

  var datasets = ...

  var stacked = stack(datasets.map(function(dataset) { ... }));

  svg.selectAll("path")
      .data(stacked)
      .enter()
      .attr("d", function(d) { return area(d.values); });

设置数据集和生成器只不过是映射您关心的特定字段/值的位置。

如果它会有所帮助，我可以尝试一个完整的工作示例。不过，我需要一个真实的数据文件。

如何将现有d3区域转换为堆叠区域？

1 个答案: