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)返回undefined，任何建议如何使其工作？

Answer 1

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

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

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