点击刷新
D3绘制柱状图
本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴
// 在 SVG 中，矩形的元素标签是 rect。例如：
<svg>
<rect></rect>
<rect></rect>
</svg>
上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：
x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度
height：矩形的高度
要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset = [250, 210, 170, 130, 90]; //数据（表示矩形的宽度）
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect") // 选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
.attr("x", 20)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return d;
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue"); //给矩形元素设置颜色
</script>
</body>
</html>
© 著作权归作者所有
举报
发表评论
0/200
