d3.js - D3 堆叠条形图：每行唯一条形图（仅堆叠一行）

Question

我对 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 会有两个条）

我现在正在处理的完整代码在这里

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

score 0 · Accepted Answer

您可以根据数据数组的索引而不是“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-轴

编辑

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

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

1 回答 1