d3.v4中序数比例尺的使用，条形图中间距设置失败。
d3.v4中序数比例尺的使用，条形图中间距设置失败。
可能的原因是序数比例尺设置的问题，但是我初学d3，不是很熟悉d3.v4的api函数的用法，不知道哪里出了问题，求解答。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
</style></head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var w = 600;
var h = 250;
var xScale = d3.scaleBand()//序数比例尺
.domain(d3.range(dataset.length))// 设置序数比例尺的值域
.range([0, w]);//根据输入值域的长度将自动将其分为相等的块，并且设定间距
var yScale = d3.scaleLinear()//线性比例尺
.domain([0, d3.max(dataset)])//设置线性比例尺的值域
.range([0, h]);//设置线性比例尺的输出范围
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);//创建svg
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i){
return xScale(i);//设置rect的起点
})
.attr("y", function(d){
return h - yScale(d);//yScale(d)依次取出数据值
})
.attr("width", function(d){
return xScale.bandwidth();//设置每个条形的宽度
})
.attr("height", function(d){
return yScale(d);//设置每个条形的高度
})
.attr("fill", function(d){
return "rgb(0, 0, "+ (d * 10) +")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("text-anchor","middle")
.attr("x", function(d, i){
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d){
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
</script></body>
</html>
结果如下:
偶尔还会出现以下错误提示：
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将width的值设置为
...]
xScale.bandwidth()/3试试看；官方文档是这样说的：默认情况下no padding, no rounding and center alignment.；
可以
console.log(xScale.paddingInner())看看。需要给xScale添加padding
xScale.padding([0.3]);