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

【问题标题】：D3 stacked bar chart: unique bar for each row (stack only one row)D3 堆叠条形图：每行唯一条形图（仅堆叠一行）
【发布时间】：2016-04-06 16:21:24
【问题描述】：

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

我遇到的问题是：如果有不止一行具有相同的值用于y轴（在我的情况下，在data.csv中，在“seq”列中出现“3”和“4”两次），那么所有具有相同名称（来自不同行）的数据将像这样堆叠在一起：

数据.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 和 d.seq=4 会有两个条）

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

任何建议将不胜感激，谢谢！

【问题讨论】：

【解决方案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-tick 标签显示“seq”中的值，请查看此处，您可以在此处了解有关轴以及如何应用自定义标签的更多信息： https://github.com/mbostock/d3/wiki/SVG-Axes

编辑

您需要在 d3.csv 成功函数中移动 yAxis 定义，然后像这样引用数据数组来标记您想要的轴：

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

【讨论】：

非常感谢您的解决方案。但是是的，我仍然需要将“seq”值显示为 y-tick 标签，但仍然无法弄清楚。我知道应该使用Tickformat，但如果我使用yAxis = d3.svg.axis() .scale(y) .tickFormat(function(d) {return d.seq; });，它将不起作用。
查看编辑。您在 tickFormat 中传递给函数的“d”只是刻度值，而不是您的数据数组。您需要在 d3.csv 调用中移动 yAxis 定义，并明确引用您的数据数组。