D3 堆叠条形图：每行的唯一条形图（仅堆叠一行）

Question

我是 D3 的新手，我正在尝试制作一个堆积条形图（或柱形图），数据集中的每一行（每个观察值）都有唯一的条形图。

我遇到的问题是：如果有超过一行的 y 轴使用相同的值（在我的例子中，在 data.csv 中，在 "seq" 列中，“3 " 和 "4" 出现了两次），那么所有同名的数据（来自不同的行）将像这样堆叠在一起：

data.csv

seq,Idle Time,Answer Time
2,95,4
1,0,3
3,22,3
4,0,4
6,43,3
5,0,2
8,30,1
7,0,3
4,20,5
3,0,8

但我要做的是为每一行制作一个条形图，尽管 d.seq 的值相同（这样 d.seq=3 和 [ 就会有两个条形图=30=]=4)

我现在正在处理的完整代码是here

如有任何建议，我们将不胜感激！

Answer 1

您可以根据数据数组的索引而不是 "seq" 值进行绘图。该索引将是唯一的。 http://plnkr.co/edit/vtsfWSB7etegM9VfI6mM?p=preview

我刚刚更新了两行

第 86 行：

y.domain(data.map(function(d, i) { return i; }));

第 112 行：

.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

如果您仍希望 y 刻度标签显示 "seq" 中的值，请查看此处，您可以在其中找到有关轴以及如何应用自定义标签的更多信息： https://github.com/mbostock/d3/wiki/SVG-Axes

编辑

您需要在 d3.csv success 函数中移动 yAxis 定义，然后像这样引用数据数组以按照您的意愿标记轴：

var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(function(i) {return data[i].seq; })
    .orient("left");

D3 stacked bar chart: unique bar for each row (stack only one row)