Question

这个堆叠到分组的条形转换的例子非常漂亮。但是，它的功能是随机数生成器，对于我的生活，我无法想象如何用我自己的数据集替换它。

http://bl.ocks.org/mbostock/3943967

如何将此堆叠到分组的条形转换导入并使用.csv文件而不是随机数据生成器？

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 14px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>

<form>
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var stack = d3.layout.stack(),
    layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
    yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

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

var color = d3.scale.ordinal()
    .range(["#aa0000", "#ffff66", "#99ff99", "#00aa00"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(0)
    .tickPadding(6)
    .orient("bottom");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));

  data.forEach(function(d) {
    var y0 = 0;
    d.power = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.power[d.power.length - 1].y1;
  });

  data.sort(function(b, a) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.Year; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

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

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("y", -8)
      .attr("x", 40)
      .attr("dy", "0em")
      .style("text-anchor", "end")
      .text("Power (Mw)");

  var year = svg.selectAll(".year")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.Year) + ",0)"; });

  year.selectAll("rect")
      .data(function(d) { return d.power; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 800)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 770)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "begin")
      .text(function(d) { return d; });

});

  rect.transition()
    .delay(function(d, i) { return i * 10; })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

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

d3.selectAll("input").on("change", change);

var timeout = setTimeout(function() {
  d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);

function change() {
  clearTimeout(timeout);
  if (this.value === "grouped") transitionGrouped();
  else transitionStacked();
}

function transitionGrouped() {
  y.domain([0, yGroupMax]);

  rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; })
      .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
      .attr("width", x.rangeBand() / n)
    .transition()
      .attr("y", function(d) { return y(d.y); })
      .attr("height", function(d) { return height - y(d.y); });
}

function transitionStacked() {
  y.domain([0, yStackMax]);

  rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; })
      .attr("y", function(d) { return y(d.y0 + d.y); })
      .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
    .transition()
      .attr("x", function(d) { return x(d.x); })
      .attr("width", x.rangeBand());
}

</script>

Answer 1

我认为您可能错过了数据中的某个级别。在您的示例中，data看起来像是一个对象数组。但在Mike的例子中，他使用了一系列对象数组：

[
   [{x:, y:}, {x:, y:},...],
   [{x:, y:}, {x:, y:},...],
   ...
]

数组中的第一级是＆＃34;层＆＃34;，表示每个堆栈或组中的柱数。每层创建一个<g>元素，该元素将包含该层中的所有58个条形。

数组中的第二个级别表示每个图层中的条形图。

您可能很难将此结构表示为CSV。您可能最好将数据作为JSON存储在服务器上。如果由于某种原因需要使用CSV，则需要弄清楚如何在不使用逗号的情况下表示内部数组。一种选择是添加一个名为＆＃34; layer＆＃34;的列。并为每个行/对象分配一个图层索引值，可用于将平面CSV数据转换为客户端上的嵌套数组。

Answer 2

老问题，但一直在研究同样的问题;希望这有助于某人。真的只是扩展斯科特在下面的回应。 Mike Bostock，这是BTW的一项了不起的工作。

1）注释掉使用测试生成器函数生成的当前layers数组（您也可以删除/注释掉测试生成器函数）

2）以下是一个新的嵌套layers数组的简单示例：

layers = [
            [
                {"x":0,"y":1.5,"y0":0}
            ],
            [
                {"x":0,"y":1.5,"y0":1.5}
            ]
        ];

3）无论您使用何种数据，您仍然需要有人填充n [每个样本期间的层数/列数]和m [样本总数或期数]变量到匹配您加载到layers

的数组

4）y0管理堆叠视图的array[0]和array[1]之间的差异 - 我们还没有弄明白function(d)如何返回所需的值y0所以现在用我的源数据解决它

5）当你开始添加新的时期或迈克称之为＆＃34;样本＆＃34;在评论中，您将每个＆＃34;图层分组＆＃34;在单独的句点数组中（等于您正在绘制的图层数）。请注意y0如何只是所有先前y坐标的聚合。 n = 4, m=2的示例：

layers = [ [ {"x":0,"y":0.5,"y0":0}, {"x":1,"y":1.5,"y0":0} ], [ {"x":0,"y":2.5,"y0":0.5}, {"x":1,"y":1.5,"y0":1.5} ], [ {"x":0,"y":0.5,"y0":3.0}, {"x":1,"y":1.5,"y0":3.0} ], [ {"x":0,"y":2.5,"y0":3.5}, {"x":1,"y":1.5,"y0":4.5} ] ];

Answer 3

让我们假设这是你的json数据：

[ {“a”：“uno”，“b”：11，“c”：21}， {“a”：“duo”，“b”：12，“c”：22}， {“a”：“tre”，“b”：13，“c”：23} ]

阵列层的结构如下：

[ [ {x：“uno”，y：11，y0：0}， {x：“duo”，y：12，y0：0}， {x：“tre”，y：13，y0：0} ] [ {x：“uno”，y：21，y0：11}， {x：“duo”，y：22，y0：12}， {x：“tre”，y：23，y0：13} ] }

两个内部数组对应于图中的两个层。

要将数据从json正确转换为堆栈，您需要逐层进行。下面的代码， cats 是一个包含组或类别名称的数组[“uno”，“duo”，“tre”]和 m 是它们的编号（ 3）; vals 是图层标签的数组[“b”，“c”]， n 是它们的编号（2）。函数 readLayer 被调用两次，每层一次。

var stack = d3.layout.stack(),
layers = stack(d3.range(n).map(function(i) { return readLayer(m,i);})),
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y;});}),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y;});});

function readLayer(m,r){
    var a = [], i; 
    for (i = 0; i < m; ++i) { a[i] = data[i][vals[r]]; }
    return a.map(function(d, i) { return {x: cats[i], y: a[i]};});
};

请注意 readLayer 不会返回值 y0 ;它在堆栈函数中创建。

堆叠到分组的条形过渡

3 个答案: