一、添加一个矩形

//Width and height
var w = 500;
var h = 100; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //创建SVG元素
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h); svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);

二、添加多条矩形

//Width and height
var w = 500;
var h = 100; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //创建SVG元素
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h); svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * 21; //Bar width of 20 plus 1 for padding
})
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);

三、均匀的添加条-定条宽

  除的方式(i * (w / dataset.length);)作为条和间隙的总宽度,在设置固定宽度小于总宽度,这时就会自然生成一个空白间隙

  一句话:条的宽度固定,总宽-条宽=空白宽。空白宽取决于总宽,总宽取决于计算表达式(w / dataset.length)

//Width and height
var w = 500;
var h = 100;
var barPadding = 1; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //创建SVG元素
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h); svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);

 四、均匀的添加条-定间隙宽

  一句话:间隙的宽度固定,总宽-空白宽=条宽。条宽取决于总宽(w / dataset.length - barPadding),总宽取决于计算表达式(w / dataset.length)

//Width and height
var w = 500;
var h = 100;
var barPadding = 1; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h); svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", 0)
.attr("width", w / dataset.length - barPadding)
.attr("height", 100);

D3.js 更自由的条形图的更多相关文章

  1. D3.js 用层画条形图

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

  2. 发现一款比echarts更牛B,效果更炫的图表组件 d3.js

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js  ,能制作更加复杂的图表 https://github.com/d3/d3 ...

  3. 使用JavaScript和D3.js实现数据可视化

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...

  4. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  5. D3.js 第一个程序 HelloWorld

    一.HTML 是怎么输出 HelloWorld 的 <html> <head> <meta charset="utf-8"> <title ...

  6. D3.js 简介和安装

    一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...

  7. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...

  9. 【 D3.js 高级系列 — 5.0 】 颜色

    颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...

随机推荐

  1. MYSQL获取自增ID的四种方法

    MYSQL获取自增ID的四种方法 1. select max(id) from tablename 2.SELECT LAST_INSERT_ID() 函数 LAST_INSERT_ID 是与tabl ...

  2. SQLServer基本函数

    1.字符串函数  长度与分析用 datalength(Char_expr) 返回字符串包含字符数,但不包含后面的空格 substring(expression,start,length) 取子串 ri ...

  3. Linux安装vim失败的解决办法

    最近想了解一下linux编程,于是linux系统下输入vim,发现竟然没有安装.好吧,那就安装吧.命令: sudo apt-get install vim 百度百科:apt-get是一条linux命令 ...

  4. android中的事件传递和处理机制

    一直以来,都被android中的事件传递和处理机制深深的困扰!今天特意来好好的探讨一下.现在的感觉是,只要你理解到位,其实事件的 传递和处理机制并没有想象中的那么难.总之,不要自己打击自己,要相信自己 ...

  5. Bus Pass

    ZOJ Problem Set - 2913 Bus Pass Time Limit: 5 Seconds      Memory Limit: 32768 KB You travel a lot b ...

  6. hdu 1028

    递推 #include<cstdio> #include<cstdlib> #include<cstring> #include<algorithm> ...

  7. web socket 心跳包的实现方案

    web socket 心跳包的实现方案05/30/2010 现在网络环境错综复杂,socket心跳包是获得健康强壮的连接的有效解决方案,今天,我们就在web socket中实现心跳包方案,是的,尽管我 ...

  8. Toad DBA Suite for Oracle 12.6 64-bit Commercial 简单连接

    注意:Toad DBA Suite for Oracle 12.6 64-bit Commercial安装包推荐去官网下载,中文版的最好不要使用绿色免安装版,不然连接会报各种错误 1.安装:双击下载好 ...

  9. CentOS 7安装指南

    CentOS 7安装指南(U盘版) 一.准备阶段 1.下载CentOS7镜像文件(ISO文件)到自己电脑,官网下载路径: http://isoredirect.centos.org/centos/7/ ...

  10. LeetCode题解之Univalued Binary Tree

    1.题目描述 2.问题分析 遍历一遍树,然后将所有节点的数值放入到一个set中,最后检查set中元素的个数是否为1. 3.代码 bool isUnivalTree(TreeNode* root) { ...