D3数据可视化-柱状图-Bar

案例

柱形图是最广泛使用的图表类型之一,同时也具有很多的展现形式。

比如:Y坐标轴可以有一条,也可以有两条分别代表不同的尺度。柱形可以是单个柱子,也可以是几个柱子一组。可以垂直方向排列,也可以水平方向排列。

水平排列的柱形图:


vertical-bars.png

垂直排列的柱形图:


horizontal-bars.png

成组的柱形图,左边柱子对应左边纵坐标轴,右边柱子对应右侧纵坐标轴:


bar-groups.png

解析

柱状图主要由柱形和坐标轴组成,有设计需求的话还可以添加标签在柱子上。

以水平排列的柱形图为例,x轴上可以采用 scalePoint 来排布,y轴上用 scaleLinear 确定柱的起始点和长度。

实现

Git 地址

源码:

<!DOCTYPE html>
<html>
  <body>
    <style>
      svg {
        border: 1px solid lightgrey;
      }
    </style>
    <script src="http://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript">
      const maxHeight = 400;
      const maxWidth = 600;
      const margin = {
        top: 20,
        right: 60,
        bottom: 20,
        left: 60,
      };
      const colorArray = ['#38CCCB', '#0074D9', '#2FCC40', '#FEDC00', '#FF4036', 'lightgrey'];
      const fruits = [
        {
          label: 'apple',
          value: 10,
        },
        {
          label: 'banana',
          value: 15,
        },
        {
          label: 'orange',
          value: 25,
        }
      ];
      const groups = [
        {
          label: 'group1',
          value1: 10,
          value2: 300,
        },
        {
          label: 'group2',
          value1: 20,
          value2: 150,
        },
        {
          label: 'group3',
          value1: 30,
          value2: 100,
        },
      ];
      function renderVerticalBars(data) {
        const barWidth = 20;
        const xTicks = new Array(data.length + 1);
        for ( let i = 0; i <= data.length; i++ ) {
          xTicks[i] = i;
        }
        const getX = (d) => d.label;
        const getY = (d) => d.value; 
        const scaleX = d3.scalePoint()
          .domain(data.map(getX))
          .range([0, maxWidth - margin.left - margin.right])
          .padding(0.2)
        const scaleY = d3.scaleLinear()
          .domain([0, d3.max(data, getY)])
          .range([maxHeight - margin.top - margin.bottom, 0])
        const svg = d3.select('body')
          .append('svg')
          .attr('width', maxWidth)
          .attr('height', maxHeight)
        const bar = svg.selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('x', (d) => scaleX(getX(d)) + margin.left - barWidth / 2)
          .attr('y', (d) => scaleY(getY(d)) + margin.top)
          .attr('width', barWidth - 1)
          .attr('height', (d) => maxHeight - margin.bottom - margin.top - scaleY(getY(d)))
          .attr('fill', (d, i) => colorArray[i % colorArray.length])
        const axisLeft = d3.axisLeft(scaleY);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${margin.top})`)
          .call(axisLeft);
        const axisBottom = d3.axisBottom(scaleX);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${maxHeight - margin.bottom})`)
          .call(axisBottom);
      }
      function renderHorizontalBars(data) {
        const barHeight = 20;
        const yTicks = new Array(data.length + 1);
        for ( let i = 0; i <= data.length; i++ ) {
          yTicks[i] = i;
        }
        const getX = (d) => d.value;
        const getY = (d) => d.label; 
        const scaleY = d3.scalePoint()
          .domain(data.map(getY))
          .range([0, maxHeight - margin.top - margin.bottom])
          .padding(0.2)
        const scaleX = d3.scaleLinear()
          .domain([0, d3.max(data, getX)])
          .range([0, maxWidth - margin.left - margin.right])
        const svg = d3.select('body')
          .append('svg')
          .attr('width', maxWidth)
          .attr('height', maxHeight)
        const bar = svg.selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('x', margin.left)
          .attr('y', (d) => scaleY(getY(d)) + margin.top - barHeight / 2)
          .attr('width', (d) => scaleX(getX(d)))
          .attr('height', barHeight)
          .attr('fill', (d, i) => colorArray[i % colorArray.length])
        const axisLeft = d3.axisLeft(scaleY);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${margin.top})`)
          .call(axisLeft);
        const axisBottom = d3.axisBottom(scaleX);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${maxHeight - margin.bottom})`)
          .call(axisBottom);
      }
      function renderBarGroups(data, keys = []) {
        const getX = (d) => d.label;
        const key1 = keys[0] || '';
        const key2 = keys[1] || '';
        const getY1 = (d) => d[key1];
        const getY2 = (d) => d[key2];
        const scaleX = d3.scalePoint()
          .domain(data.map(getX))
          .range([0, maxWidth - margin.left - margin.right])
          .padding(0.2)
        const scaleY1 = d3.scaleLinear()
          .domain([0, d3.max(data, getY1)])
          .range([maxHeight - margin.top - margin.bottom, 0]);
        const scaleY2 = d3.scaleLinear()
          .domain([0, d3.max(data, getY2)])
          .range([maxHeight - margin.top - margin.bottom, 0]);
        const svg = d3.select('body')
          .append('svg')
          .attr('width', maxWidth)
          .attr('height', maxHeight)
        function renderBars(getX, getY, scaleX, scaleY, barWidth, offsetX, color) {
          const bars = svg.append('g').selectAll('rect')
            .data(data)
            .enter()
            .append('rect')
            .attr('x', (d) => margin.left + scaleX(getX(d)) + offsetX - barWidth)
            .attr('y', (d) => scaleY(getY(d)) + margin.top)
            .attr('width', barWidth)
            .attr('height', (d) => maxHeight - margin.top - margin.bottom - scaleY(getY(d)))
            .attr('fill', color)
        }
        renderBars(getX, getY1, scaleX, scaleY1, 20, 0, colorArray[0]);
        renderBars(getX, getY2, scaleX, scaleY2, 20, 20, colorArray[1]);
        const axisLeft = d3.axisLeft(scaleY1);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${margin.top})`)
          .call(axisLeft);
        const axisRight = d3.axisRight(scaleY2);
        svg.append('g')
          .attr('transform', `translate(${maxWidth - margin.right}, ${margin.top})`)
          .call(axisRight);
        const axisBottom = d3.axisBottom(scaleX);
        svg.append('g')
          .attr('transform', `translate(${margin.left}, ${maxHeight - margin.bottom})`)
          .call(axisBottom);
        
      }
      renderVerticalBars(fruits);
      renderHorizontalBars(fruits);
      renderBarGroups(groups, ['value1', 'value2']);
    </script>
  </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容