为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. 针对浏览器不支持JavaScript的简单处理

    简单的思路是这样的: 在网页中显示某些内容,作为不支持JS的提示, 然后在页面载人的时候执行一段JS代码,代码的功能就是隐藏那个提示不支持JS的代码 具体内容看例子: <html> < ...

  2. 远程连接postgresql和redis设置

    1. 让Postgresql服务器被远程访问 1.1 编辑 pg_hba.conf,配置用户的访问权限 vi /etc/postgresql/8.4/main/pg_hba.conf 增加设置项 ho ...

  3. Xshell关闭导致jar服务终止,使Jar在CentOS后台运行

    环境:Xsehll6,CentOS7 在项目文件夹新建一个runjar.sh 在sh中写入(举例说明) nohup java -Dfile.encoding=UTF- -jar fin-mgmt-.j ...

  4. IDE vscode识别webpack中alias配置路径

    引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别 https://segmentfault.com/q/1010000011911879 最后 ...

  5. SQL 工具系列二

    1.RedGate 工具 SQL Prompt 脚步智能提示工具 脚步提示工具,轻松写入,编辑和探索SQL: SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为 ...

  6. 在 Azure WebApps 中运行64位 Asp.net Core 应用

    作为微软下一代的开源的跨平台的开发框架, Asp.net core 正在吸引越来越多的开发者基于其构建现代 web 应用. 目前, Azure App Service 也实现了对 asp.net co ...

  7. Redis - 数据类型常用命令

    5种数据类型都离不开key,先列出key的相关命令. KEY相关操作 列出符合规则的KEYS KEYS pattern pattern支持glob风格的通配符格式,即: ? 一个字符 * 任意多个字符 ...

  8. Vue生命周期整理

    这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建.初 ...

  9. Description Resource Path Location Type web.xml is missing and <failOnMissingWebXml> is set to true

    点击Deployment Descriptor 选择Generate Deployment Descriptor Stub. 就会在 src/main/webapp 生成WEB-INF并且有web.x ...

  10. jQuery多次选中checkbox失效

    在做项目的过程中,遇到一个问题.就是使用jquery的attr方法即 $("#aaa").attr('checked',true); $("#aaa").att ...