Javascript 在D3js中创建条形图
我以《Web交互式数据可视化》（Interactive Data Visualization for Web）一书为例，介绍了如何使用Javascript 在D3js中创建条形图,javascript,d3.js,Javascript,D3.js,我以《Web交互式数据可视化》（Interactive Data Visualization for Web）一书为例，介绍了如何使用rect创建条形图。我面临的问题是每一个酒吧的起源和它的下滑。代码如下： <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Census</title> <meta http-equiv="Cont
rect<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Census</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../d3/d3.min.js"></script>
</head>
<body>
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
background-color: teal;
margin-right: 5px;
margin-bottom: 320px;
}
rect{
margin-right: 5px;
}
</style>
<script>
//var dataset = [ 5,10,15];
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
/*d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.style("height", function(d) {
return d*5 + "px";
})
.attr("class", "bar");
*/
var w = 500;
var h = 100;
var barPadding = 4;
var svg = d3.select("body")
.append("svg")
.attr("width", 520)
.attr("height", 300)
.style("border", "1px solid black");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * 21; //Bar width of 20 plus 1 for padding
})
.attr("y", function(d) {
return h - d; //Height minus data value
})
.attr("width",20)
.attr("height", function(d) {
return d; //This cause issue I guess
});
</script>
</body>
</html>
统计
酒吧{
显示：内联块；
宽度：20px；
高度：75px；/*稍后我们将覆盖高度*/
背景色：青色；
右边距：5px；
边缘底部：320px；
}
直肠{
右边距：5px；
}
//var数据集=[5,10,15]；
var数据集=[5,10,13,19,21,25,22,18,15,13，
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
/*d3.选择（“主体”）。选择全部（“div”）
.数据（数据集）
.输入（）
.附加（“div”）
.样式（“高度”，功能（d）{
返回d*5+“px”；
})
.attr（“类别”、“酒吧”）；
*/
var w=500；
var h=100；
var=4；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，520）
.attr（“高度”，300）
.样式（“边框”，“1px纯黑”）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*21；//填充条宽度为20加1
})
.attr（“y”，函数（d）{
返回h-d；//高度减去数据值
})
.attr（“宽度”，20）
.attr（“高度”，功能（d）{
返回d；//我想这是导致问题的原因
});
图表是正确的。您需要关于
rect