D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

Z时代
2024-01-10
分类：综合

现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。

还有数据都是自己定义的假数据，大家参考一下制作方法即可。

首先定义柱形图的数据、绘图区域的宽高、和上下左右的边距:


var width = 600;        //SVG绘制区域的宽度
  var height = 500;        //SVG绘制区域的高度
  //定义数据
  var dataList = [50,43,120,87,99,167,142]
  //定义上下左右的边距
  var padding = {top:20,right:20,bottom:100,left:100}

然后设定SVG:


 var svg = d3.select("#body")     //选择id为body的div
     .append("svg")      //在<body>中添加<avg>      .attr("width",width)    //设定<svg>的宽度属性
      .attr("height",height)    //设定<svg>的高度属性

定义比例尺:


//定义比例尺
  //x轴宽度
  var xAxisWidth = 300;
  //y轴宽度
  var yAxisWidth = 300;
  //x轴比例尺(序数比例尺)
  var xScale = d3.scale.ordinal()     //构建一个序数比例尺
     .domain(d3.range(dataList.length)) //设定定义域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()设定值域，并将结果取整
  //y轴比例尺(线性比例尺)
  var yScale = d3.scale.linear()     //创建一个线性比例尺
     .domain([0,d3.max(dataList)])  //设定定义域
     .range([0,yAxisWidth])    //设定值域

然后添加矩形:


//添加矩形
   svg.selectAll("rect")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("rect")      //添加rect元素，使其与绑定数组的长度一致
     .attr("fill","fuchsia")    //设置颜色
     .attr("x",function(d,i){   //设置矩形的x坐标
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //设置矩形的y坐标
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //设置矩形的宽度
     .attr("height",function(d){   //设置矩形的高度
      return yScale(d)
     })

然后为矩形添加文字标签:


//为矩形添加标签文字
    svg.selectAll("text")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("text")      //添加text元素，使其与绑定数组的长度一致
     .attr("fill","white")    //字体颜色
     .attr("font-size","14px")   //字体大小
     .attr("text-anchor","middle")  //文本相对基点的位置
     .attr("x",function(d,i){   //设置文字的x坐标
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //设置文字的y坐标
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相对于当前位置在x方向上平移的距离  
     .attr("dy","2em")     //相对于当前位置在y方向上平移的距离
     .text(function(d){     //文字内容
      return d
     })

最后定义坐标轴:


//定义坐标轴
  //x轴
  var xAxis = d3.svg.axis()      //创建一个默认的新坐标轴      
     .scale(xScale)      //设定坐标轴的比例尺
     .orient("bottom")     //设定坐标轴的方向
  //重新设置y轴比例尺的值域，与原来的相反
  yScale.range([yAxisWidth,0])
  //y轴
  var yAxis = d3.svg.axis()      //创建一个默认的新坐标轴 
     .scale(yScale)      //设定坐标轴的比例尺
     .orient("left")      //设定坐标轴的方向
  //添加x轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //将x轴进行平移
   .call(xAxis)        //将自身作为参数传递给xAxis函数
  //添加y轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //将y轴进行平移
   .call(yAxis)        //将自身作为参数传递给yAxis函数

大家看一下效果图:

完整代码:


import React, { Component } from 'react';
import * as d3 from 'd3'; //引入d3
class Bar extends Component {
 constructor(props) {
  super(props);
  this.state = {}
 }
 componentDidMount(){   //将方法在componentDidMount生命周期钩子函数中面调用
  this.oneMethod()
 }
 oneMethod(){
  var width = 600;        //SVG绘制区域的宽度
  var height = 500;        //SVG绘制区域的高度
  //定义数据
  var dataList = [50,43,120,87,99,167,142]
  //定义上下左右的边距
  var padding = {top:20,right:20,bottom:100,left:100}
  var svg = d3.select("#body")     //选择id为body的div
     .append("svg")      //在<body>中添加<avg>
     .attr("width",width)    //设定<svg>的宽度属性
     .attr("height",height)    //设定<svg>的高度属性
  //定义比例尺
  //x轴宽度
  var xAxisWidth = 300;
  //y轴宽度
  var yAxisWidth = 300;
  //x轴比例尺(序数比例尺)
  var xScale = d3.scale.ordinal()     //构建一个序数比例尺
     .domain(d3.range(dataList.length)) //设定定义域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()设定值域，并将结果取整
  //y轴比例尺(线性比例尺)
  var yScale = d3.scale.linear()     //创建一个线性比例尺
     .domain([0,d3.max(dataList)])  //设定定义域
     .range([0,yAxisWidth])    //设定值域
  //添加矩形
   svg.selectAll("rect")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("rect")      //添加rect元素，使其与绑定数组的长度一致
     .attr("fill","fuchsia")    //设置颜色
     .attr("x",function(d,i){   //设置矩形的x坐标
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //设置矩形的y坐标
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //设置矩形的宽度
     .attr("height",function(d){   //设置矩形的高度
      return yScale(d)
     })
  //为矩形添加标签文字
    svg.selectAll("text")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("text")      //添加text元素，使其与绑定数组的长度一致
     .attr("fill","white")    //字体颜色
     .attr("font-size","14px")   //字体大小
     .attr("text-anchor","middle")  //文本相对基点的位置
     .attr("x",function(d,i){   //设置文字的x坐标
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //设置文字的y坐标
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相对于当前位置在x方向上平移的距离  
     .attr("dy","2em")     //相对于当前位置在y方向上平移的距离
     .text(function(d){     //文字内容
      return d
     })
  //定义坐标轴
  //x轴
  var xAxis = d3.svg.axis()      //创建一个默认的新坐标轴      
     .scale(xScale)      //设定坐标轴的比例尺
     .orient("bottom")     //设定坐标轴的方向
  //重新设置y轴比例尺的值域，与原来的相反
  yScale.range([yAxisWidth,0])
  //y轴
  var yAxis = d3.svg.axis()      //创建一个默认的新坐标轴 
     .scale(yScale)      //设定坐标轴的比例尺
     .orient("left")      //设定坐标轴的方向
  //添加x轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //将x轴进行平移
   .call(xAxis)        //将自身作为参数传递给xAxis函数
  //添加y轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //将y轴进行平移
   .call(yAxis)        //将自身作为参数传递给yAxis函数
 }
render() {
  return (
   <div id="body" >
   </div>
  );
 }
}
export default Bar;