gpt4 book ai didi

javascript - 基于窗口大小的 D3 比例

转载 作者:太空宇宙 更新时间:2023-11-04 15:45:14 29 4
gpt4 key购买 nike

我是 D3 v3 的新手,正在学习一些有关基本线性和序数尺度的教程。我正在修改教程中的一段代码。我想让颜色根据窗口的大小显示和缩放。如果有更多数据,那么它应该再次均匀分布以容纳所有数据。

var data = [0,1,2,3,4,5,6,7,8];
var colorScale = d3.scale.category10();

var padding = 2, dataLength = data.length;

var Xscale = d3.scale.linear()
.domain([data.min, data.max])
.range([0,window.innerWidth]);

var svg = d3.select("body")
.append("svg")
.attr({
"width" : window.innerWidth,
"height" : window.innerHeight
});

var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");

rects.attr({
"fill": function(d) {return colorScale(d);},
"x" : function(d , i) {return Xscale(d);},
"width" : window.innerWidth / dataLength - padding,
"height" : 50
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript"></script>
</body>

</html>

有人可以帮助我完成上述代码并提供一些关于我做错了什么的指导吗?

最佳答案

maxmin 不是 data 的属性,它只是一个平面数组。因此,没有 data.maxdata.min,您的 Xscale 域现在是这样的:

[Nan, Nan]

当然,使用 NaN 不会有任何进展。

取而代之的是,您正在寻找:

.domain([d3.min(data), d3.max(data)])

这是您更新的代码:

var data = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var colorScale = d3.scale.category10();

var padding = 2,
dataLength = data.length;

var Xscale = d3.scale.linear()
.domain([d3.min(data), d3.max(data)])
.range([0, window.innerWidth]);

var svg = d3.select("body")
.append("svg")
.attr({
"width": window.innerWidth,
"height": window.innerHeight
});

var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");

rects.attr({
"fill": function(d) {
return colorScale(d);
},
"x": function(d, i) {
return Xscale(d);
},
"width": window.innerWidth / dataLength - padding,
"height": 50
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

关于javascript - 基于窗口大小的 D3 比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43599435/

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