一、添加一个矩形

//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. Markdown资源 markd

    markdown是将某些格式的文本,翻译成HTML的一个库,非常精妙! https://www.npmjs.com/package/markedhttps://github.com/adam-p/ma ...

  2. SQL的inner join、left join、right join、full outer join、union、union all

    主题: SQL的inner join.left join.right join.full outer join.union.union all的学习. Table A和Table B表如下所示: 表A ...

  3. LeetCode Graph Valid Tree

    原题链接在这里:https://leetcode.com/problems/graph-valid-tree/ 题目: Given n nodes labeled from 0 to n - 1 an ...

  4. 作为团队leader,怎样激发每个人的最大战斗力

    之前总在讨论怎么做运营,也就是业务本身,这次聊聊管理. 有人说,我还没带团队. 也没关系,现在从业者都很年轻,可能用不了一两年你也会开始面试别人和带团队,即使2个人也算团队. 另外,其他同事即使不是你 ...

  5. JSP中的指令(Directive)

  6. Mac系统上用Node做APNS

    1.安装Node,下载地址:http://nodejs.org 2.更新npm,终端命令:sudo npm update npm -g 3.安装apn,终端命令:npm install apn 4.导 ...

  7. VS2015/2013/2012 IIS Express Debug Classic ASP

    参考资料: https://msdn.microsoft.com/en-us/library/ms241740(v=vs.100).aspx When you attach to an ASP Web ...

  8. curl常用选项详解

    curl常用选项详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 又是下班的时间了,让我们一起来学习一下今天的Linux命令吧~我一半只把自己常用的参数列出来,其他的有但是我们几 ...

  9. 修改 window.setTimeout,使之可以传递参数和对象参数

    /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 使用方法: setTimeout(回调函数,时间,参数1,,参数n) */ var _setTimeout=setTi ...

  10. 设置IE默认文本模式的方法

    设置IE默认文本模式的方法 <meta http-equiv="X-UA-Compatible" content="IE=8" /> IE=5.6. ...