<!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. C++内存溢出和内存泄漏?

    1.内存溢出 内存溢出是指程序在申请内存时没有足够的内存空间供其使用.原因可能如下: (1)内存中加载的数据过于庞大: (2)代码中存在死循环: (3)递归调用太深,导致堆栈溢出等: (4)内存泄漏最 ...

  2. npm上发布包和删除已发布的npm包（https://www.npmjs.com/）

    1.npm上发布自己写的包 2.删除已经发布的包 npm unpublish --force //强制删除,这个是撤销24小时发布的包,有些包发布久了,这个方法不会再管用了. npx force-un ...

  3. Silverlight日记：动态生成DataGrid、行列装换、动态加载控件

    本文主要针对使用DataGrid动态绑定数据对象,并实现行列转换效果. 一,前台绑定 <sdk:DataGrid x:Name="dataGrid2" Style=" ...

  4. DD命令做备份和恢复

    正确的备份方法是先挂载移动硬盘分区:mount /dev/sdb5 /mnt 然后再备份:dd if=/dev/sda of=/mnt/backup_sda.img 恢复时同样要先挂载,再恢复:mou ...

  5. 学习笔记(三）： Generalization/Overfitting/Validation

      目录 Generalization: Peril of Overfitting Low loss, but still a bad model? How Do We Know If Our Mod ...

  6. 面试：如何把xxx.sh使用/etc/init.d/xxx.sh start启动，并且可以用chkconfig配置开机自启动

    chkconfig原理: 1.脚本放到/etc/init.d下面,并且可执行(/etc/init.d/sshd) 需要被chkconfig管理,需要添加进去chkconfig  --add  sshd ...

  7. angular4使用代理

    1. 在angular-cli项目根目录下创建proxy.config.json { "/api/v1": { "target": "http://1 ...

  8. destoon添加修改会员信息时，信息丢失

    最近做一destoon项目,因注册字段太多,分了几个步骤.分几个页面来修改公司信息.发现有时候修改时以前保存的字段莫名丢失.. 经查是 因为member.class.php  add 和 edit时, ...

  9. java中常用的集合的一些区别 （2013-10-07-163写的日志迁移

    java中的以下几大集合: List结构的集合类: ArrayListl类,LinkedList类,Vector类,stack类 Map结构的集合类: HashMap类,Hashtable类(此是以k ...

  10. 让Python带你看一场唯美的横飘雪!

    “北国风光,千里冰封,万里雪飘”,这句诗描写了一句美丽肃静的风光图,恰逢昨天笔者这边也下了一场比较大的雪,要不今天就用Python带大家也来领略一次美丽的雪景? 开发环境 版本:Python3.6 系 ...