矩形代替刻度D3

Question

與問題here類似，我一直在研究與上一個問題相同的事情。我現在的問題與鏈接類似，但更多的是關於實現。當我運行我的代碼時，在日誌中出現錯誤，提示「TypeError：x.ticks不是函數」。這是一段代碼，它是指：

svg.selectAll("g.grid") 
    .data(y.ticks()).enter() 
    .append("g").attr("class", "grid") 
    .selectAll("rect") 
     .data(x.ticks()) 
     .enter() 
     .append("rect") 
     .attr("x", function(d, i, j) { 
       return xScale(j); 
     }) 
     .attr("y", function(d, i, j) { 
       return yScale(i); 
     }) 
     .attr("width", xScale.rangeBand()) 
     .attr("height", yScale.rangeBand()) 
     .attr("fill", function(d, i) { 
       return ((i) % 2) == 1 ? "green" : "blue"; 
     }); 

此代碼工作得很好的this小提琴，但在我的代碼運行它，看到here給我一個錯誤。任何幫助？

Answer 1

在您的示例中，您正嘗試調用ordinal scale而不是linear scale的刻度。使用rangeBoundBands，就像您鏈接到的問題一樣，可能是要走的路。

Answer 2

你的問題是你使用的是序數標度。如果你想調用.ticks（），D3會讓你使用線性刻度，否則會拋出一個錯誤