gpt4 book ai didi

javascript - D3 .rangeBands() 返回 NaN

转载 作者:行者123 更新时间:2023-12-02 16:53:45 26 4
gpt4 key购买 nike

在 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 之间的值,为什么上面的语句在 var y 等于这个的情况下计算结果为 NaN:

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

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

最佳答案

我认为序数尺度在这里是错误的选择。序数比例尺将域中的离散值集直接映射到范围中的值,因此仅当您将域中的值之一传递给它时,它才会返回一个值。在您的情况下,当您传递 0 时,它将返回高度;当您传递 200000 时,它将返回 0。其他任何值都将返回 NaN。

也许你想要的是 linear scale 。线性刻度采用连续范围,然后返回该范围内的值。鉴于此规模:

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

您可以向其传递 0 到 200000 之间的任何值,它将返回高度到 0 之间的值。

关于javascript - D3 .rangeBands() 返回 NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26351289/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com