我是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>
&#13;
有人可以帮我解释上面提到的代码,并提供一些关于我做错的准则吗?
答案 0 :(得分:1)
max
和min
不是data
的属性,它只是一个扁平数组。因此,没有data.max
或data.min
,您现在的Xscale
域名是:
[Nan, Nan]
当然,你没有使用NaNs。
而不是那样,你正在寻找:
.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
})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#13;