快捷導(dǎo)航

利用D3.js實(shí)現(xiàn)最簡(jiǎn)單的柱狀圖示例代碼

更新時(shí)間：2016年12月09日 11:05:44 作者：薛彬

D3.js是一個(gè)基于數(shù)據(jù)操作文檔JavaScript庫。D3幫助你給數(shù)據(jù)帶來活力通過使用HTML、SVG和CSS。D3重視Web標(biāo)準(zhǔn)為你提供現(xiàn)代瀏覽器的全部功能，而不是給你一個(gè)專有的框架。最近在學(xué)習(xí)D3.js，這個(gè)例子是通過d3.js畫一個(gè)簡(jiǎn)單的柱狀圖。下面來一起看看吧。

首先把效果圖放出來：

具備了一個(gè)柱狀圖的基礎(chǔ)元素：柱形，坐標(biāo)軸，刻度，數(shù)值等。

不得不說，d3.js比直接用的echarts更麻煩，但是確實(shí)更自由。

來看看如何實(shí)現(xiàn)吧。

//確定畫布的大小
var width = 400;
var height = 400;
//在 body 里添加一個(gè) SVG 畫布 
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
//定義畫布周圍空白的地方
var padding = {left: 30, right: 30, top: 20, bottom: 20};
//定義一個(gè)數(shù)組
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);

總結(jié)

好了，以上就是利用D3.js實(shí)現(xiàn)最簡(jiǎn)單柱狀圖的例子，怎么樣？簡(jiǎn)單吧？希望本文的內(nèi)容對(duì)剛學(xué)習(xí)d3.js的朋友們能有所幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: