<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>testD3-3-drawingDivBar</title>

<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>

<style type="text/css">

div.bar {

    display: inline-block;

    width: 20px;

    margin-right: 2px;

    background-color: teal;

}

</style>

</head>

<body>

<script type="text/javascript">

    var dataset = [ 5, 10, 15, 20, 25 ];

    d3.select("body").selectAll("div")

        .data(dataset)

        .enter()

        .append("div")

        .attr("class", "bar")

        .style("height", function(d) {

            return (d * 5) + "px";

        });

</script>

</body>

</html>

代码解释：

1.1 为同类层添加样式

div.bar {

    display: inline-block;

    width: 20px;

    background-color: teal;

}

1.2 声明要为某类层设置属性

.attr("class", "bar")

1.3 为每个特定的层设置属性

.style("height", function(d) {

    return (d * 5) + "px";

});

1.4 设置层之间的间隔

margin-right: 2px;
 

D3.js 用层画条形图的更多相关文章

  1. D3.js 更自由的条形图

    一.添加一个矩形 //Width and height var w = 500; var h = 100; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...

  2. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  3. D3.js画思维导图（转）

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  4. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  5. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  6. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  7. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  8. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  9. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

随机推荐

  1. 盒模型中--border

    三要素:宽border-width,形状border-style,颜色border-color <style> div{ width:300px; height:300px; backgr ...

  2. [转] CentOS单独安装Apache Benchmark压力测试工具的办法

    Apache安装包中自带的压力测试工具 Apache Benchmark(简称ab) 简单易用,这里就采用 ab作为压力测试工具了. 1.独立安装 ab运行需要依赖apr-util包,安装命令为: 1 ...

  3. NET基础（1）：类型基础

    所有类型都从System.Object 派生,‘运行时’要求每个类型都从System.Object类派生,也就是说,以下两个类型定义完全一致: //隐式派生字Object class Employee ...

  4. Eclipse定制右键创建文件快捷菜单

    打开窗口“Customize Perspective - Java EE”,切换选项卡到“Shortcuts”: 进行一下配置: “Generate”:如上图勾选方式 "Java" ...

  5. Linux：安装OpenSSH-Server E:Package openssh-server has no installation candidate

    $sduo apt-get install openssh-server Reading package lists… Done Building dependency tree Reading st ...

  6. Linux Server 14.04输入数字变为了*

    虚拟机装好了Ubuntu14.04后,大键盘上边的数字输入时变为了*(奇葩的加密吗?!!) 从网上看到别人都遇到的是小键盘输入数字时,会变为字符,我这小键盘却是没问题,大键盘有问题奇葩. 如果小键盘输 ...

  7. 简明python教程 --C++程序员的视角（二）:函数及作用域

    函数通过def关键字定义.def关键字后跟一个函数的标识符名称,然后跟一对圆括号.圆括号之中可以包括一些变量名,该行以冒号结尾.接下来是一块语句,它们是函数体. 函数的基本概念 1 位置:从左往右进行 ...

  8. [原创]如何设计Lighthoused定位接收电路

    本文使用最新出来的专用芯片TS3633 1)电路设计说明 1.电源电路 利用LM317低线性稳压芯片将5V或者12V的电源电压稳压到3.3V为TS3633提供工作电压.其中,磁珠L1主要用于抑制电源线 ...

  9. 开发环境中biztalk项目设置注意事项(转)

      适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...

  10. cmd运行sql server安装

    cmd运行sql server安装 SQL2012非群集安装_更新到最新版本.bat setup.exe /UpdateSource=.\hotfix\Latest /ACTION="Ins ...