接触ｄ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. NB群友

    链接:https://ac.nowcoder.com/acm/contest/625/A来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言26214 ...

  2. SQLAlchemy+Flask-RESTful使用(三)

    前言 顺理成章地,19.3.21起笔了第三章.也就是最近没啥事了,才有时间搞这些.生命不息奋斗不止吧! 变更记录 # 19.3.21 起笔 # 19.3.21 增加 Flask-RESTful如何获取 ...

  3. nodejs adm-zip 解压文件 中文文件名乱码 问题解决

    修改需要使用到iconv-lite包 (npm安装即可),修改 zipEntry.js 文件中的 entryName 方法 var iconv = require('iconv-lite'); var ...

  4. Lesson 2-4（字典）

    2.7 字典 &.字典是许多值的集合,索引可以使用许多不同的数据类型,不只是整数,可以是数.字符串或元组. &.字典的索引被称为“键”,键及其关联的值称为“键-值”对,这种键-值对也称 ...

  5. DataTable插件通过js导出Excel

    $('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...

  6. python爬取安居客二手房网站数据（转）

    之前没课的时候写过安居客的爬虫,但那也是小打小闹,那这次呢, 还是小打小闹 哈哈,现在开始正式进行爬虫书写 首先,需要分析一下要爬取的网站的结构: 作为一名河南的学生,那就看看郑州的二手房信息吧! 在 ...

  7. ssm简单搭建

    目录结构 1.web.xml配置文件 <?xml version="1.0" encoding="UTF-8"?><web-app xmlns ...

  8. 闲谈REST API

    REST 表述性状态传递(英文:Representational State Transfer,简称REST). 资源: 资源由URI(统一资源定位符)的来指定. 通过资源的表现形式来操作资源 对资源 ...

  9. vue小技巧之偷懒的文件路径——减少不必要的代码

    众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import  '../../../s ...

  10. lsblk

    linux磁盘命令-lsblk显现磁盘阵列分组 lsblk(list block devices)能列出系统上所有的磁盘. lsblk [-dfimpt] [device] 选项与参数: -d :仅列 ...