<html>
<head>
<meta charset="utf-8">
<title>做一个简单的条形图</title>
</head>
<body>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<div id="app">

</div>
<script>

var width = 300; //画布的宽度
var height = 300; //画布的高度

var svg = d3.select("#app") //选择文档中的元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度

var dataset = [ 250 , 210 , 170 , 130 , 90 ];

var rectHeight = 25; //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");

</script>

</body>

</html>

数据可视化d3.v4.js的更多相关文章

  1. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...

  2. 使用JavaScript和D3.js实现数据可视化

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏 介绍 D3.js是一个JavaScript库.它的全称是Data-Driven Documents(数据 ...

  3. vue3 数据可视化项目

    可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术 完成该项目 ...

  4. 数据可视化Echarts-实例

    数据可视化 Echarts 百度 数据可视化 hightCharts 1 数据可视化 D3 老外 -----------------------------当遇到个啥玩意儿,Echarts .high ...

  5. 【python可视化系列】python数据可视化利器--pyecharts

    学可视化就跟学弹吉他一样,刚开始你会觉得自己弹出来的是噪音,也就有了在使用python可视化的时候,总说,我擦,为啥别人画的图那么溜: [python可视化系列]python数据可视化利器--pyec ...

  6. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  7. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  8. 前端使用d3.js调用地图api 进行数据可视化

    前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojso ...

  9. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...

随机推荐

  1. Java之集合(十一)IdentityHashMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7381905.html 1.前言 查看JDK源码总是能发现一些新东西,IdentityHashMap也是Map的一 ...

  2. 泛型深入--java泛型的继承和实现、泛型擦除

    泛型实现类: package generic; /** * 泛型父类:子类为“富二代”:子类的泛型要比父类多 * 1,保留父类的泛型-->子类为泛型类 * 2,不保留父类泛型-->子类按需 ...

  3. JAVA实现单双向链表的增、删、改、查

    单向链表 package com.ywx.link; /** * 单向链表 * @author vashon * */ public class LinkTest { public static vo ...

  4. mysql笔记--group by,limit用法

    table: id tag status a b c d 一.group by用法 .与count 联合计数 select status,count(*) from table group by st ...

  5. Python虚拟环境中pip install时没有权限问题

    virtualenv Permission denied 新建的python虚拟环境的目录的所属者必须是当前用户,才不会出现这种错误 比如 virtualenv py27 sudo chown zzf ...

  6. Go pprof和火焰图

    Profiling 在计算机性能调试领域里,profiling 就是对应用的画像,这里画像就是应用使用 CPU 和内存的情况.也就是说应用使用了多少 CPU 资源?都是哪些部分在使用?每个函数使用的比 ...

  7. InnoSetup打包时出现Interal error: CallSpawnServer: Unexpected response: $0.错误的解决办法

    如果在使用Innosetup打包软件时,如果出现Interal error: CallSpawnServer: Unexpected response: $0.错误, 如下图: 可以查看 Innose ...

  8. hadoop下安装mahout

    安装hadoop 完成 安装mahout 首先下载mahout压缩文件apache-mahout-distribution-0.12.2.tar.gz 放到/home/hadoop/software- ...

  9. 如何在生产环境禁用swagger

    pringMVC集成springfox-swagger2和springfox-swagger-ui很简单,只需要两步: (1)pom中添加依赖 <dependency> <group ...

  10. Android sdk manager 下载速度慢的问题

    不多说了,直接附上方法: 首先打开Ecplise 中Android sdk manager,打开后, 在此窗口的上方打开偏好设置选项,然后在里面设置HTTP Proxy server和HTTP Pro ...