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方法将返回第一次出现的位置。