D3绘制柱状图
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了D3绘制柱状图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1264字，纯文字阅读大概需要2分钟。
内容图文
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>
内容总结
以上是互联网集市为您收集整理的D3绘制柱状图全部内容，希望文章能够帮你解决D3绘制柱状图所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】