接触ｄ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. 面向对象原生JavaScript案例炫彩小球

    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...

  2. 初识C语言（三）

    C语言中的运算符 C语言中的运算就是对数据进行操作.处理的过程.运算符就是指定该运算的处理方式. C语言中的运算符: 算术运算符 赋值运算符 关系运算符 逻辑运算符 三目运算符 算数运算符 C语言中的 ...

  3. 点击编辑table变为可编辑状态

    简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...

  4. 主席树+树链剖分——南昌邀请赛Distance on the tree

    学了差不多一星期的主席树+树链剖分,再来看这题发现其实是个板子题 一开始想复杂了,以为要用类似求树上第k大的树上差分思想来解决这道题,但其实树链上<=k的元素个数其实直接可以用树链剖分来求 具体 ...

  5. 2018-2019-2 20165206 网络攻防技术 Exp5 MSF基础应用

    - 2018-2019-2 20165206<网络攻防技术>Exp5 MSF基础应用 - 实验任务 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击,如 ...

  6. layui学习

    layui代码生成器 https://9499574.github.io/layui-form-create/ layui界面生成器 http://layuiout.magicalcoder.com/ ...

  7. Snakes 的 Naïve Graph

    题解: 首先分析一下这个问题 发现等价于是求n之内与n互素的数的个数,即欧拉函数 这个可以线性筛 但发现还应该减去$x^2==1$的情况 这个东西不是那么好处理 考虑用中国剩余定理拆 因为$p1^{a ...

  8. YOLOv3：训练自己的数据（附优化与问题总结）

    环境说明 系统:ubuntu16.04 显卡:Tesla k80 12G显存 python环境: 2.7 && 3.6 前提条件:cuda9.0 cudnn7.0 opencv3.4. ...

  9. Database Change Notification

    使用java监控oracle数据库的变化,主要是针对表数据,如果发生变化,使用select去查询,能够达到推送的目的 package com.test.notifi; import java.sql. ...

  10. 4.BN推导

    参考博客:https://www.cnblogs.com/guoyaohua/p/8724433.html 参考知乎:https://www.zhihu.com/question/38102762/a ...