为DOM元素添加class

.attr("class", "bar")  //为元素添加class属性,<div class="bar"></div>

.classed("bar", true)   //添加class "bar"
.classed("bar", false) //删除class "bar"

Drawing Bars:

var dataset = [ , , , ,  ];

d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar"); //css
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
background-color: teal;
}

Setting Styles

.style("height", function(d) {
return d + "px";
});

优化一下

.style("height", function(d) {
var barHeight = d * ; //Scale up by factor of 5
return barHeight + "px";
}); //并设margin-right:2px;

D3——根据数据画图的更多相关文章

  1. matlab导入txt数据画图

    因为最近需要观察txt保存的一堆数据,则需要使用这些数据画图.强大的matlab分分钟解决了. 实例数据:data.txt 步骤: ①打开matlab -> HOME(主页) -> Imp ...

  2. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...

  3. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

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

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

  5. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  6. d3.js:数据可视化利器之 selection:选择集

    选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...

  7. D3——动态绑定数据

    一.绑定数组元素 , , , , ]; d3.select("body") .selectAll("p") .data(dataset) .enter() .a ...

  8. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  9. d3 使用数据

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

随机推荐

  1. 2018年12月份最热门的Java开源项目

    1 JavaGuide https://github.com/Snailclimb/JavaGuide     Star 14726 这是一份Java学习指南,涵盖大部分Java程序员所需要掌握的核心 ...

  2. UVA 10328(DP,大数,至少连续)

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=19825 这道题和http://www.cnblogs.com/qlky/p/ ...

  3. jQuery的几点笔记

    1.jQuery核心选择器 (sizzle.js) http://sizzlejs.com/ 2.jQuery有两个主要特性 ①隐式迭代 //改变页面所有p标签的背景色 $('p').css('bac ...

  4. crontab 切割日志

    cutlog.sh #!/bin/sh source /etc/profile D=$(date "+%Y%m%d%H%M%S") mv "/usr/local/Cell ...

  5. Codeforces183D T-shirt

    传送门 这题好神啊……(然而我连每种物品贡献独立都没看出来…… 首先$O(n^2 m)$的DP肯定都会写,然后可以发现每种物品一定是选得越多再选一个的收益就越低,因此可以用一个堆维护当前收益最高的物品 ...

  6. 51Nod1957 有限背包计数问题

    传送门 另一个传送门 这题还挺有意思…… 先贴一波出题人的题解…… (啥你说你看不见?看来你还没过啊,等着A了再看或者乖乖花点头盾好了……) 然后是我的做法……思想都是一样的,只是细节不一样而已…… ...

  7. angular之$on、$emit、$broadcast

    1.$scope.$on view事件 //View被加载但是DOM树构建之前时: $scope.$on('$viewContentLoading', function(event, viewConf ...

  8. vue支付密码

    从网上搜索了好多都很麻烦,花了点事件自己做了个,简单轻便,老少皆宜 <template> <section class="pay-mask" @click=&qu ...

  9. 删除SVN版本信息 .svn文件夹

    环境:MyEclipse.Windows 问题描述: 在MyEclipse中当我们需要将一个文件夹(包含若干文件或嵌套文件夹)拷贝到另一个文件夹时,此时文件内容虽然拷贝过去了,但其下面的 .svn文件 ...

  10. EF+Oracle

    一个小项目,设计到几十张表,但都是简单的增删改查,所以呢,想偷懒用EF. 结果,在.NET4.0下,死活都不行.最后在Oracle官方找到demo,上面清清楚楚的写着必须>NET4.5. 看着E ...