D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)
现在用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;
这样，只带坐标轴和比例尺的柱形图就做完了。后续可以再添加过渡动画效果。
下一章给大家介绍带坐标轴和比例尺的散点图的制作。
D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)的更多相关文章
- D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖 ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- three.js cannon.js物理引擎制作一个保龄球游戏
关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...
- js笔记（制作一个简单的计数器）
首先编写静态页中的按钮: <input id="result" type="button" value="该程序已经运行了0秒!"/ ...
- 使用React制作一个可配置的页面生成器[0]
背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...
- 使用JS的画布制作一个瞄准镜
<canvas width="600" height="500" id="myCanvas"></canvas> & ...
- D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序
数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...
- D3.js学习笔记（三）——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
随机推荐
- （转）C#中String跟string的“区别”
string是c#中的类,String是.net Framework的类(在C# IDE中不会显示蓝色) C# string映射为.net Framework的String 如果用string,编译器 ...
- 13、testng.xml对用例进行分组
目录如下: TestGroup.java 代码如下: package com.testng.cn; import org.testng.annotations.*; import static org ...
- mysql优化3：BTree索引和Hash索引
一.BTree索引 注:名叫btree索引,大的方面看,都用的平衡树,但具体的实现上,各引擎稍有不同,比如,严格地说,NDB引擎使用的是T-tree,Myisam和innodb中默认用B-tree索引 ...
- JavaMail API 发送电子邮件
现在,我们对JavaMail API及其核心类有一个清晰的概念,现在让我们写这将发送简单的电子邮件,邮件带有附件,电子邮件,HTML内容和电子邮件内嵌图像一个简单的程序. 接着在上述所有情况的基本步骤 ...
- socket API CSocket CAsyncSocket 用法及区别
要进行网络编程就要和Socket打交道,Socket有同步阻塞方式和异步非阻塞方式两种使用,事实上同步和异步在我们编程的生涯中可能遇到了很多,而Socket也没什么特别.虽然同步好用,不费劲,但不能满 ...
- 通过start.spring.io生成的springboot项目，导入IDE后POM第一行报错
通过problem控制台查看,显示unknown 尝试降低springboot版本,问题没了,应该是与maven jdk等版本冲突导致 这里JDK 1.8 mave 3.6.1 降低springb ...
- mysql数据库 --表操作
一.表与表之间建关系 (1) 将所有的数据放在一张表内的弊端 表的组织结构不清晰 浪费存储时间 可扩展性极差 ---> 类似于将所有的代码写入到一个py文件中 -->解耦部分 (2) 如何 ...
- 使用EditPlus批量修改文件编码格式
步骤一: 步骤二: 步骤三: 步骤四:
- leetcood学习笔记-54-螺旋矩阵
题目描述: 第一次提交: class Solution: def spiralOrder(self, matrix: List[List[int]]) -> List[int]: j,x = 0 ...
- ASCII 对应表
{ Bin (二进制) Oct (八进制) Dec (十进制) Hex (十六进制) 缩写/字符 解释 0000 0000 00 0 0x00 NUL(null) 空字符 0000 0001 01 1 ...