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会让你使用线性比例，否则会抛出错误

矩形而不是刻度D3

2 个答案: