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