接触ｄ3完全是由兴趣所致，废话不多说看代码：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];这是这个图所需要的数据，其实这个柱状图最初不长这个样子，大家看到白色的＋蓝色的＝４００；
最初在形成柱状图的时候其实是蓝色的补集也就是白色的．为什么呢，因为这些ｊｓ都是从左到下啊，

我定义４００－白色的得到的就是蓝色的；如果不懂得话，可以照着写，写着写着你就懂了．

解释下我为什么要截个图，

d3.js,初遇的更多相关文章

  1. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js部署node环境开发

    总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...

  5. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  6. 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  7. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  8. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

随机推荐

  1. Date——js 获取当前日期到之后一个月30天的日期区间

    var dateList = []; let startDate = new Date(); let endDate = new Date(); endDate.setDate(startDate.g ...

  2. c++入门篇七

    拷贝构造函数的调用时机: class Person { public: //构造函数 Person() { //无参构造函数 } Person(int a) { //有参构造函数 cout <& ...

  3. vue环境下新建项目

    1.之前电脑上安装了node和npm,查看下版本信息. 2.现在安装vue-cli脚手架,可以全局安装: npm install --global  vue-cli 之前自己电脑没有安装过webpac ...

  4. 【spark】dataframe常见操作

    spark dataframe派生于RDD类,但是提供了非常强大的数据操作功能.当然主要对类SQL的支持. 在实际工作中会遇到这样的情况,主要是会进行两个数据集的筛选.合并,重新入库. 首先加载数据集 ...

  5. 怎么编辑PDF文件内容，PDF文件编辑方法

    怎样编辑PDF文件内容?这是一个常常困扰我们的问题,工作当中我们经常会收到PDF格式的文件,但有时的文件内容不是我们想要的或者是觉得不合理的需要改掉.但是每次有这样的问题时都没有什么好的解决方法,每次 ...

  6. Chrome插件触发web页面的事件

    Chrome插件中不能直接调用Web页面的元素js,原因是chrome插件的机制http://stackoverflow.com/questions/17819344/triggering-a-cli ...

  7. mac抓包工具anyproxy

    本文以 mac为代理,ios手机为客户端举例. 文档地址:http://anyproxy.io/ 1.环境配置: 安装  node  :参考   https://www.jianshu.com/p/3 ...

  8. 分布式缓存技术之Redis_04Redis的应用实战

    目录 1 Redis Java客户端的使用 Jedis 单点连接 Jedis sentinel连接哨兵集群 Jedis sentinel源码分析 Jedis Cluster分片环境连接 Jedis C ...

  9. pygame学习之绘制移动的矩形

    import pygame from pygame.locals import * pygame.init() screen = pygame.display.set_mode((600, 500)) ...

  10. （六）read读取控制台输入

    1．基本语法 read(选项)(参数) 选项: -p:指定读取值时的提示符: -t:指定读取值时等待的时间(秒). 参数 变量:指定读取值的变量名 2．案例实操 (1)提示7秒内,读取控制台输入的名称 ...