<!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. 常用的ement语法

    缩写语法: 介绍:Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 声明:第一次写博客大家多多关照,如有错误或者需要补充的请到评论里留言,谢谢大家! 快速生成htm ...

  2. RabbitMQ 学习资料

    https://www.rabbitmq.com/getstarted.html http://www.cnblogs.com/luxiaoxun/p/3918054.html http://back ...

  3. deque 用法

    引用博客:https://blog.csdn.net/zyq522376829/article/details/46801973 下面是那位大佬写的的笔记整理~~~~ deque - 双向队列 1.构 ...

  4. numpy中常用的函数

    1. power(x1, x2) 对x1中的每个元素求n次方.不会改变x1上午shape. 2. sum(a, axis=None, dtype=None, out=None, keepdims=Fa ...

  5. scipy应用积分操作

    1.什么是scipy? SciPy是一款方便.易于使用.专为科学和工程设计的Python工具包.它包括统计,优化,整合,线性代数模块,傅里叶变换,信号和图像处理,常微分方程求解器等等. integra ...

  6. 【netbeans】【ubuntu】ubuntu netbeans 抗锯齿化修复

    每一个在ubuntu下用netbeans的,都会对它的字体怎么会显示的那么难看表示很不理解.我就是因此几乎没有用netbeans的.   不过今天终于解决问题了,虽然没有eclipse显示的那么漂亮, ...

  7. 搭建本地虚拟服务器linux(CentOS 7)的python虚拟环境(Hyper-V演示）

    新建虚拟机->安装CentOS7->新建虚拟交换机:内部网络->CentOS7设置->网络适配器:虚拟交换机:新建虚拟交换机->进入CentOS # cd /etc/sy ...

  8. 经典MSSQL语句大全和常用SQL语句命令的作用

    下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL类型包括数据库.表的创建,修改,删除,声明—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML类 ...

  9. FSMC原理通俗解释

    所以不用GPIO口直接驱动液晶,是因为这种方法速度太慢,而FSMC是用来外接各种存储芯片的,所以其数据通信速度是比普通GPIO口要快得多的.TFT-LCD 驱动芯片的读写时序和SRAM的差不多,所以就 ...

  10. .Net Task常见问题

    最近尝试使用一下Task,但是使用过程中因为API的不熟悉碰到了很多问题,不清楚什么时间来调用Task.Start(),具体该怎么使用等等. 如下所描述的Task.Start()方法均为实例方法. 1 ...