利用D3.js实现最简单的柱状图示例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用D3.js实现最简单的柱状图示例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2303字，纯文字阅读大概需要4分钟。

内容图文

首先把效果图放出来：

具备了一个柱状图的基础元素：柱形，坐标轴，刻度，数值等。

不得不说，d3.js比直接用的echarts更麻烦，但是确实更自由。

来看看如何实现吧。

//确定画布的大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布 
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
//定义画布周围空白的地方
var padding = {left: 30, right: 30, top: 20, bottom: 20};
//定义一个数组
var dataset = [10, 20, 30, 40, 30, 20, 10, 5];
//x轴的比例尺
var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scale.linear()
  .domain([0, d3.max(dataset)])
  .range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
var rects = svg.selectAll(".MyRect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "MyRect")
  .attr("fill", "steelblue")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .attr("x", function (d, i) {
   return xScale(i) + rectPadding / 2;
  })
  .attr("y", function (d) {
   return yScale(d);
  })
  .attr("width", xScale.rangeBand() - rectPadding)
  .attr("height", function (d) {
   return height - padding.top - padding.bottom - yScale(d);
  });
//添加文字元素
var texts = svg.selectAll(".MyText")
  .data(dataset)
  .enter()
  .append("text")
  .attr("class", "MyText")
  .attr("fill", "white")
  .attr("text-anchor", "middle")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .attr("x", function (d, i) {
   return xScale(i) + rectPadding / 2;
  })
  .attr("y", function (d) {
   return yScale(d);
  })
  .attr("dx", function () {
   return (xScale.rangeBand() - rectPadding) / 2;
  })
  .attr("dy", function (d) {
   return 20;
  })
  .text(function (d) {
   return d;
  });
//添加x轴
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis);
//添加y轴
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

总结

好了，以上就是利用D3.js实现最简单柱状图的例子，怎么样？简单吧？希望本文的内容对刚学习d3.js的朋友们能有所帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

内容总结

以上是互联网集市为您收集整理的利用D3.js实现最简单的柱状图示例代码全部内容，希望文章能够帮你解决利用D3.js实现最简单的柱状图示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---