<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>testD3--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 = [ , , , ,  ];

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

        .data(dataset)

        .enter()

        .append("div")

        .attr("class", "bar")

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

            return (d * ) + "px";

        });

</script>

</body>

</html>

根据dataset的数据生成div,之后给div条形的样式，最后根据数据给每个div赋予不同的高度

d3 画简单的柱形图的更多相关文章

  1. d3 画地图终极自适应大小方案

    d3,v4以前用d3画地图的时候,为了让地图差不多正好画在容器的上下左右正中间,不得不慢慢的这样调: const projection = d3.geoMercator() .center([108. ...

  2. wxWidgets学习笔记——在屏幕上画简单的图形和文字

    在屏幕上画简单图形和显示图片.处理简单鼠标键盘事件 /*************************************************************** * Name: M ...

  3. 用matplotlib.pyplot画简单的折线图，直方图，散点图

    #coding=utf-8 """ 用matplotlib.pyplot画简单的折线图,直方图,散点图 """ import matplot ...

  4. 用Java画简单验证码

    以下是具体代码: package com.jinzhi.tes2; import java.awt.Color;import java.awt.Font;import java.awt.Graphic ...

  5. D3画完整柱状图（带坐标轴、标签）

    昨天晚上本来打算花一点时间把之前学的柱状图改一下,用CSV文件来替换自定义数据.这一替换可不得了,一晚上就搭进去了,还好今早找到了问题的所在,原因在于我的数据引用出了问题. 现在就来讲解一下如何画一个 ...

  6. 用canvas画简单的“我的世界”人物头像

    前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...

  7. D3.js 完整的柱形图

    一个完整的柱形图包含三部分:矩形.文字.坐标轴.制作一个实用的柱形图,内容包括:选择集.数据绑定.比例尺.坐标轴等内容. 1. 添加 SVG 画布 //画布大小 var width = 400; va ...

  8. 玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  9. ASP.NET 简单的柱形图实现（附带示例）

    对于一些内部系统的项目,各种图表是在所难免的,因为图表可以更加清晰的表达出想看到的数据. 因为之前从来没有做过关于图表的东西,唯一能想到的就是“验证码”,所以应该是一个思路,用GDI去搞. 数据懒着去 ...

随机推荐

  1. Paper: TranE

    论文标题:Translating Embeddings for Modeling Multi-relational Data 标题翻译:多元关系数据翻译嵌入建模 摘要: 考虑多元关系数据的实体和关系在 ...

  2. 酷炫的3D照片墙

    今天给大家分享的案例是酷炫的3D照片墙 这个案例主要是通过 CSS3 和原生的 JS 来实现的,接下来我给大家分享一下这个效果实现的过程.博客上不知道怎么放本地视频,所以只能放两张效果截图了. 1.实 ...

  3. Noip 训练指南

    目录 Noip 训练指南 图论 数据结构 位运算 期望 题解 Noip 训练指南 目前完成 \(4 / 72\) 图论 [ ] 跳楼机 [ ] 墨墨的等式 [ ] 最优贸易 [ ] 泥泞的道路 [ ] ...

  4. PAT 乙级 1088

    题目 题目链接:PAT 乙级 1088 题解 比较简单的一道题,下面来简单说说思路: 因为甲确定是一个两位数,因此通过简单的暴力循环求解甲的值,又根据题设条件“把甲的能力值的 2 个数字调换位置就是乙 ...

  5. FTP服务-实现vsftpd虚拟用户

    前几篇介绍了基础,这篇将具体实现几个案例 实现基于文件验证的vsftpd虚拟用户,每个用户独立一个文件夹 1.创建用户数据库文件 vim /etc/vsftpd/vusers.txt qq cento ...

  6. NodeJS基础入门-fs文件系统

    文件I/O是由简单封装的标准POSIX函数提供.通过require('fs') 使用该模块.所有的方法都有异步和同步的形式. 异步方法的最后一个参数都是一个回调函数.传给回调函数的参数取决于具体方法, ...

  7. SQL语句小练习

    一.创建如下表结构(t_book) Id         主键   自增一 bookName   可变长 20 Price   小数 Author    可变长20 bookTypeId    图书类 ...

  8. proc_info_list

    内核中每种处理器架构抽象为一个proc_info_list结构体,在arch/arm/include/asm/procinfo.h中定义, struct proc_info_list { unsign ...

  9. 搜索引擎elasticsearch + kibana + X-pack + IK安装部署

    目录 准备安装环境 配置启动 启动elasticsearch 启动kibana 启用X-pack 安装使用IK 使用示例 官方Clients 准备安装环境 这次我们安装以下软件或插件: elastic ...

  10. 线段树：CDOJ1597-An easy problem C（区间更新的线段树）

    An easy problem C Time Limit: 4000/2000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Pr ...