<!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. iperf安装与使用

    从官网下载相应版本. https://iperf.fr/iperf-download.php centos7 安装 rpm -i iperf3-3.1.3-1.fc24.x86_64.rpm ubun ...

  2. javaweb基础(19)_jsp标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  3. DB2中创建表

    CONNECT TO TEST; CREATE TABLE DB2ADMIN.PERSON ( ID BIGINT NOT NULL , NAME BIGINT , FLAG BIGINT , ADD ...

  4. POJ-1961-Period(ZOJ-2177)

    这题是最短循环节,然后我们尝试小于字符串长度的所有长度,如果符合,我们就输出. 如果它等于0,说明它不循环,因为之前并没有重复的,如果i%(i-next[i])==0说明它是循环的,然后除一下得到周期 ...

  5. 【动态规划】bzoj1939: [Croatian2010] Zuma

    隐约记得类似的一道JSOI祖玛……然后好像这题不能够把珠子合并成一段?或许是因为这里珠子碰在一起之后可以不消除? Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 K 个 ...

  6. percona-toolkit工具使用介绍

    percona-toolkit工具使用介绍 1. pt-heartbeat 1.1 pt-heartbeat 原理 1.2 pt-heartbeat 主要参数介绍 1.3 pt-heartbeat 实 ...

  7. input类型

    由于我们学习一个新的知识,而以前的都差不多忘完了,下面来复习我们以前学习的input的类型: button     点击的按钮                date    年/月/日 CheckBo ...

  8. verilog 1995 VS 2001 part1模块声明的扩展

    1.模块声明的扩展 (1)端口声明(input/output/inout)同数据类型声明(reg /wire)放在同一语句中. (2)ANSI C风格的端口声明可以用于module/task/func ...

  9. python可视化动态图表: 关于pyecharts的sankey桑基图绘制

    最近因工作原因,需要处理一些数据,顺便学习一下动态图表的绘制.本质是使具有源头的流动信息能够准确找到其上下级关系和流向. 数据来源是csv文件 导入成为dataframe之后,列为其车辆的各部件供应商 ...

  10. HBase0.94.2-cdh4.2.0需求评估测试报告1.0之二

    Hbase 配置文件: hbase-site.xml <configuration> <property> <name>hbase.cluster.distribu ...