d3.js甘特图问题

Question

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

什么时候

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

我在做

var rectTransform = function(d) {
    return "translate(" + x(d.termStartDate) + "," + y(d.slotName) + ")";
    };

一切顺利，但现在我正在服用

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

现在

var rectTransform = function(d) {
    return "translate(" + x(d.termStartDate) + "," + y(d.slotName) + ")";
    };

其中d.slotName = slot1， d.slotName或slot3或任何其他值， y(d.slotName)返回未定义，有什么建议如何使它工作？

Answer 1

按照这个答案 ， y范围的域是taskTypes的数组索引。 这意味着：

y("slot3") = undefined
y(taskTypes.indexOf("slot3")) = 54 // Or some valid value

您需要确定d.slotName在数组中的索引。 对于重复的值（例如"slot1" ），使用indexOf效果不佳。 如果该项目多次出现，则indexOf方法返回第一次出现的位置。