<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. Centos 6.5下的OPENJDK卸载和SUN的JDK安装、环境变量配置

    不多说,直接上干货! 说明 图形界面安装,会自带有Centos6.5自带的OPRNJDK!!! *********************************自带的OPENJDK的卸载****** ...

  2. Hibernate 抛出的 Could not execute JDBC batch update

    异常堆栈 org.hibernate.exception.ConstraintViolationException: Could not execute JDBC batch update at or ...

  3. 你误解了Windows的文件后缀名吗？

    一.背景说明 有很多的小伙伴对windows下的文件后缀名不能很好地理解作用和区别,更不用说高深的使用了,在这里给大家说一下这些文件后缀名到底有什么区别,有什么作用呢? 二.说明 简单的说来,wind ...

  4. lintcode-->哈希函数

    在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假设任何字符串都是基 ...

  5. Java多态的一些陷阱

    Java多态是如何实现的? Java的多态和C++一样,是通过延时绑定(late binding)或者说运行时绑定(runtime binding)来实现的.当调用某一个对象引用的方法时,因为编译器并 ...

  6. nuxt踩过的坑

    nuxt.js 简单介绍 nuxt官网:https://zh.nuxtjs.org/ 1.nuxt.js的原理图: 具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述. 2.nuxt.js的优 ...

  7. Mycat常见错误

    Mycat常见错误 1.  问题: schema myinvoice didn't config tables,so you must set dataNode property! 解决:在schem ...

  8. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  9. StreamRead和StreamWriter的使用

    //StreamRead来读取一个文件 using (StreamReader sr = new StreamReader(@"C:\Users\enle\Desktop\新建文本文档.tx ...

  10. Unity3d嵌入web网页

    应用场景 程序中的界面风格 UI内容等相关内容需要很容易方便的跟新替换,不使用unity传统的热加载方式,也不想使用和H5等做混合APP的时候, 就用嵌入web来实现. 假如我想替换某个背景图,一般来 ...