现在用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版本)的更多相关文章

  1. D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)

    上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图.   散点图(Scatter Chart),通常是一横一竖 ...

  2. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  3. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  4. three.js cannon.js物理引擎制作一个保龄球游戏

    关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...

  5. js笔记（制作一个简单的计数器）

    首先编写静态页中的按钮: <input  id="result" type="button" value="该程序已经运行了0秒!"/ ...

  6. 使用React制作一个可配置的页面生成器[0]

    背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...

  7. 使用JS的画布制作一个瞄准镜

    <canvas width="600" height="500" id="myCanvas"></canvas> & ...

  8. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  9. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. PHP面试 PHP基础知识 六（正则表达式）

    正则表达式 正则表达式的作用 分割.查找.匹配.替换字符串 分隔符:正斜线(/).hash符号(#).以及取反符号(~)   通用原子:\d(代表十进制的0-9).\D (取反除了0-9).\w(数字 ...

  2. 【Java多线程系列三】实现线程同步的方法

    两种实现线程同步的方法 方法 特性 synchronized  不需要显式的加锁,易实现 ReentrantLock 需要显式地加解锁,灵活性更好,性能更优秀,结合Condition可实现多种条件锁  ...

  3. Django框架（九）—— 单表增删改查，在Python脚本中调用Django环境

    目录 单表增删改查,在Python脚本中调用Django环境 一.数据库连接配置 二.orm创建表和字段 三.单表增删改查 1.增加数据 2.删除数据 3.修改数据 4.查询数据 四.在Python脚 ...

  4. 用EditText控件的属性inputType

    android:inputType参数类型说明 android:inputType="none"--输入普通字符 android:inputType="text" ...

  5. MyEclipse中最常用的快捷键大全

    1. [ALT+/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2. [C ...

  6. sublimeText3的安装及插件的配置使用

    这里主要记录一些关于sublime text的配置,并且参照了别人的博客归纳的. 一.下载sublime text   http://www.sublimetext.com/3二.安装Package ...

  7. Java oop 第13章_多线程

    第13章_多线程 一.   多线程相关的概念:  程序:由某种编程语言开发可执行某些功能的代码组合,它是静态的概念.   进程:当程序被执行时的过程可以理解为讲程序从外存调入内存的过程,会为每一个程序 ...

  8. 如何清除Windows共享登录的用户名密码

    打开cmd 1.[查看已记录的登录信息] net use 2.[清除记录] 得关掉你所有打开的samba之后再 net use * /del

  9. 通过statCounter计算给定的RDD[Double]的统计信息的方法

    需求1:给定一个RDD[Double],进行计算,该RDD的统计信息(count,mean,stdev,max,min) 代码: def main(args: Array[String]): Unit ...

  10. SpringBoot中使用Scheduling执行定时任务

    SpringBoot自带的 Schedule,可以将它看成一个轻量级的Quartz,而且使用起来比Quartz简单许多 以下任务都是在单线程下执行的 第一步 创建SpringBoot项目 第二步 外汇 ...