d3.js 需要在 y 轴上重复值

Question

我有一个数组：

taskTypes = [slot1, slot2, slot3,slot4,slot1,slot2,slot6];

我的 y 轴代码是：

var y = d3.scale.ordinal()
    .domain(taskTypes)
    .rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1);

它仅在 y 轴上显示唯一值，我想按原样显示这些值。你能帮我写出正确的代码吗？

Answer 1

This answer 给出了基本的解决方案：使用序数尺度，域值唯一标识对应的范围值。在您的情况下，两个 '"slot1"' 输入值都将映射到相同的输出值，因此不会显得唯一。

解决方案是使用数组索引(0, 1, 2...) 而不是数组值("slot1", "slot2"...) 作为您的序数比例输入域：

var taskTypes = ["slot1", "slot2", "slot3","slot4","slot1","slot2","slot6"];

var y = d3.scale.ordinal()
     .domain(d3.range(0, taskTypes.length))
     .rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1);

在这里提琴：http://jsfiddle.net/henbox/fhf3095r/3/