Rectangles instead of ticks D3

Question

Like the question here , I worked on the same as in the last question. My question now looks like a link, but more about implementation. When I run my code, I get an error in my log saying: "TypeError: x.ticks is not a function." This is the part of the code it refers to:

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 code works fine in this script, but gives me an error when running in my code, as shown here . Any help?

Answer 1

In your example, you are trying to call ticks on an ordinal scale instead of a linear scale . Using rangeBoundBands, as in the question you contacted with, is probably the way to go.

Answer 2

Your problem is that you are using ordinal scale. D3 allows you to use a linear scale if you want to call .ticks (), otherwise it throws an error