矩形代替刻度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会让你使用线性刻度，否则会抛出一个错误