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且d.seq = 4将有两个条）< / p>

我现在正在处理的完整代码是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-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");