Question

在Chrome调试器下面的代码中，我收到以下错误

Error: Invalid value for <rect> attribute y="NaN"

当这个被激活时

        this.options.barDemo.selectAll("rect")
            .data(data)
            .enter()
            .append("svg:rect")
            .attr("x", function (d, i) {
                //console.log(x(i));
                 return x(i);
            })
            .attr("y", function (d) {
                console.log(height - y(d.attributes.contract));
                return height - y(d.attributes.contract);
            })
            .attr("height", function (d) {
                console.log(y(d.attributes.contract));
                return y(d.attributes.contract);
            })
            .attr("width", barWidth)
            .attr("fill", "#2d578b");

我已将y坐标值

的问题与此函数隔离开来

y(d.attributes.contract)

我的问题是：给定0到200000之间的值，为什么上面的语句评估为NaN给定var y等于：

 var y = d3.scale.ordinal().domain([0, 200000]).rangeBands([height, 0]);

我的理解是D3 .ordinal()函数将根据该值在给定范围内的位置返回坐标。这是我第一次使用D3，所以任何建议/提示/技巧都非常感谢。

Answer 1

我认为这里的顺序尺度是错误的选择。序数比例映射将域中离散值集合的值直接指定为范围中的值，因此只有在将其中一个值传递给域时，它才会返回值。在你的情况下，当你传递0时它将返回高度，当你传递200000时它将返回0。其他任何东西都将返回NaN。

你想要的可能是linear scale。线性刻度采用连续范围，然后返回该范围内的值。鉴于这种规模：

var y = d3.scale.linear().domain([0, 200000]).range([height, 0]);

你可以传递0到200000之间的任何值，它将返回高度和0之间的值。

D3 .rangeBands（）返回NaN

1 个答案: