<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. webbench的安装

    1.下载webbench包: 2.下载完毕后,在linux中安装   root@jack-desktop:~/software# tar xvzf webbench-1.5.tar.gz   root ...

  2. Office自动生成目录步骤（非常实用）（图文详解）

    不多说,直接上干货! 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http://www.cnblogs.co ...

  3. Python -- Gui编程 -- Qt库的使用 -- 配置资源文件

    1.源文件(qtRes.py) import sys from PyQt4 import QtCore, QtGui, uic class MyDialog(QtGui.QDialog): def _ ...

  4. fastText 安装

    Windows: https://www.lfd.uci.edu/~gohlke/pythonlibs/#fasttext 下载需要的版本 然后:pip install 文件名

  5. fail2ban的使用以及防暴力破解与邮件预警

    fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作(一般情况下是防火墙),而且可以发送e-mail通知系统管理员! fail2ban运行机制:简单来说其功能就 ...

  6. zabbix邮件内容乱码与邮件内容为附件解决办法

    在zabbix的实际使用过程中,在收到邮件预警的时候,我们会发现邮件内容是乱码的,在手机端收到的是附件,而且附件下载后的文件类型是打不开的.这样我们不知道我们是哪个服务器的哪项服务出了问题,接下来我们 ...

  7. iOS 使用UI控件的外观协议UIAppearance进行设置默认UI控件样式

    在iOS开发中,经常会对UINavigationBar的样式进行全局样式.采用的设置方式有两种: 第一种,采用方式如下: [UINavigationBar appearance] 这种是对一类对象的默 ...

  8. [转]How to log queries using Entity Framework 7?

    本文转自:https://stackoverflow.com/questions/26747837/how-to-log-queries-using-entity-framework-7

  9. C#中is与as的区别分析

    这篇文章主要介绍了C#中is与as的区别,较为详细的分析了is与as的原理与特性及用法区别,具有很好的学习借鉴价值,需要的朋友可以参考下 本文实例分析了C#中is与as的区别,分享给大家供大家参考.具 ...

  10. MyEclipse设置选中单词其它同名单词前景色和背景色

    General->Editors->Annotations->Occurrences