D3.js庫-8-完整的柱狀圖

制作一個完整的柱狀圖

一個完整的柱狀圖應該是包含坐标軸、文字、矩形和标題等。在本篇文章中将從資料定義、定義畫布和邊框、坐标軸和比例尺的定義、矩形元素的屬性設定、字型的大小等各個方面進行講解。

定義資料集

首先，定義我們将要用于描繪的資料集合。每個資料由name和value組成

定義畫布SVG

畫布的定義需要從svg元素中提取出來

d3.select("#mainsvg")

然後再定義其寬和高，注意兩種定義的方法：一種是利用+号将字元串轉成數值型，一種是直接指派

定義margin

定義margin的時候需要指定4個屬性：top、bottom、left、right。

定義兩種比例尺

橫軸是線性比例尺；縱軸是離散型的比例尺。注意兩種比例尺的映射範圍

定義分組元素g

定義兩個坐标軸

坐标軸定義的時候需要将比例尺傳進來。一個是向左，一個向下

設定矩形元素的屬性

改變字型和設定标題

源碼

<!DOCTYPE html>
<html>
  <head>
    <title>BarChart</title>
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
	</script>


  </head>

  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>
      // 1. 定義資料
      const data = [{name:"zhangsan",value:6}
                    ,{name:"lisi",value:17}
                    ,{name:"haozheng",value:27}
                    ,{name:"pidada",value:34}
                    ,{name:"zhouzheng",value:10}
                    ,{name:"peter",value:22}
                  ]

      // 2. 定義svg及其寬高
      const svg = d3.select("#mainsvg");  // 取出svg的id号
      const width = +svg.attr("width");  // + 表示将字元串轉成數值
      const height = 800;  // 比較兩種定義方法

      // 3. 定義margin：4個屬性
      // SVG指的是整個作畫的空間，定義了margin之後，将作畫空間控制在svg-margin之内
      const margin = {top:60, right:30, left:100, bottom:60};
      const innerWidth = width - margin.left - margin.right;  // 整個畫布減去margin的左右兩邊
      const innerHeight = height - margin.top - margin.bottom;  // 整個畫布的高減去mrgin的上下

      // 4. 定義兩種比例尺：線性和離散型
      const xScale = d3.scaleLinear()
                        .domain([0,d3.max(data, d => d.value)])  // x軸上的取值是value
                        .range([0,innerWidth]);

      const yScale = d3.scaleBand()
                        .domain(data.map(d => d.name))   // y軸上的取值是名字name
                        .range([0,innerHeight])
                        .padding(0.1);  // 指定每個矩形的間隔

      // 5. 定義分組元素g
      const g = svg.append("g")
                    .attr("id","maingroup")
                    .attr("transform",`translate(${margin.left},${margin.top})`);

      // 6. 定義兩個坐标軸，并且利用元素g進行回調
      const yAxis = d3.axisLeft(yScale)
                        .tickSize(-innerWidth);
      g.append("g").call(yAxis);   // 通過分組元素g進行回調

      const xAxis = d3.axisBottom(xScale);
      g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`);

      // 7. 每個矩形元素進行屬性設定
      data.forEach(d => {
            g.append("rect")
              .attr("width",xScale(d.value))
              .attr("height",yScale.bandwidth())
              .attr("fill","green")
              .attr("opacity",0.8)  // 透明度
              .attr("y",yScale(d.name));
      })

      // 8. 改變y軸上的字型大小
      d3.selectAll(".tick text").attr("font-size","1.5em");

      // 9. 标題設定
      g.append("text").text("bar-Chart")
              .attr("font-size","1.5em")
              .attr("transform",`translate(${innerWidth / 2}, 0)`)  // 字型最左邊居中
              .attr("text-anchor","middle");  // 字型居中
    </script>
  </body>
</html>

複制