D3.js(v3)+react如何实现带坐标与比例尺的柱形图-创新互联
这篇文章将为大家详细讲解有关D3.js(v3)+react如何实现带坐标与比例尺的柱形图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站专注于成都网站建设、网站制作、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。现在用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") //在中添加.attr("width",width) //设定
定义比例尺:
//定义比例尺 //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") //在中添加.attr("width",width) //设定 的宽度属性 .attr("height",height) //设定 的高度属性 //定义比例尺 //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 ( ); } } export default Bar;
关于“D3.js(v3)+react如何实现带坐标与比例尺的柱形图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:D3.js(v3)+react如何实现带坐标与比例尺的柱形图-创新互联
本文路径:http://myzitong.com/article/ihesc.html