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，或 slot2 或 slot3 或任何其他值，y(d.slotName) 返回未定义，任何建议如何使其工作？

Answer 1

根据this answer，y 比例的域是taskTypes 的数组索引。这意味着：

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

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