Rectangles Instead of Ticks D3

Question

Similar to question here, I've been working on the same thing as in the last question. My question now is similar to the link, but is more about the implementation. When I run my code, I get an error in my log that says "TypeError: x.ticks is not a function". This is the piece of 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 perfectly well in this fiddle, but gives me an error while running it in my code, as seen here. Any help?

Works fine for me apart from the legend code: https://jsfiddle.net/ayurgygs/ — Lars Kotthoff, Jul 21 '15 at 23:01
@LarsKotthoff I meant for it to work with the alternating rectangles — Alexey Ayzin, Jul 21 '15 at 23:29
Well you haven't implemented that. My point is that I'm not getting the error you're getting. — Lars Kotthoff, Jul 21 '15 at 23:38
@LarsKotthoff Right so, the code I've put in has the code for the ticks and gives me the error, but the jsFiddle you posted doesn't have an error because it doesn't contain the rectangle code. Check with the code in the post please? It may be just me or a typo or something, so would you mind checking? — Alexey Ayzin, Jul 21 '15 at 23:51
Argh, so the code you've posted as your code where the error can be seen doesn't actually contain the code where the error can be seen? Well in that case the answer given is correct -- you can't call `.ticks()` on an ordinal scale. — Lars Kotthoff, Jul 21 '15 at 23:55

score 1 · Accepted Answer · answered Jul 21 '15 at 22:59

1

In your example you are trying to call ticks on an ordinal scale instead of a linear scale. Utilising rangeBoundBands, like in the question you've linked to, is probably the way to go.

answered Jul 21 '15 at 22:59

keoghpe

406
5
18

score 1 · Answer 2 · answered Jul 22 '15 at 01:46

1

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

answered Jul 22 '15 at 01:46

This isn't quite right, there are also other types of scale that you can call `.tick()` on. – Lars Kotthoff Jul 22 '15 at 04:07

Rectangles Instead of Ticks D3

2 Answers2

Linked