我是 d3.js 的新手,目前正在版本 4 中制作一个简单的条形图。我了解比例的基本概念。问题是每当我重新加载页面时,条形图上的一些条形图被切成两半,或者一直移动到顶部(或底部),这是我的代码。我希望我的条形图保留在 svg 内,但如果我要放置例如
.attr(height, function(d){ return yScale(d)]);
这不会起作用。有任何想法吗?我的代码应该位于底部。
var data = [ 40,60,80,100,600,700];
var height = 500, width = 500;
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height);
var yScale = d3.scaleLinear()
.domain([40, 700])
.range([0,400]);
var bars = canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 30)
.attr("height", function(d){ return yScale(d)})
.attr("x", function(d,i){ return i * 35})
.attr("y", function(d) { return height - d});
}
图像输出在这里。
最佳答案
这里的问题是这一行:
.attr("y", function(d) {
return height - d
});
为什么使用原始数据值?您必须使用比例返回的值:
.attr("y", function(d) {
return height - yScale(d)
});
这是更新后的代码:
var data = [40, 60, 80, 100, 600, 700];
var height = 500,
width = 500;
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var yScale = d3.scaleLinear()
.domain([40, 700])
.range([0, 400]);
var bars = canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 30)
.attr("height", function(d) {
return yScale(d)
})
.attr("x", function(d, i) {
return i * 35
})
.attr("y", function(d) {
return height - yScale(d)
});
<script src="https://d3js.org/d3.v4.min.js"></script>
关于javascript - 我的 d3.js 体重秤无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45557898/