<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. EJB3 阶段总结+一个EJB3案例 (2)

    这篇博文接着上一篇博文的EJB案例. 在上一篇博文中,将程序的架构基本给描述出来了,EJB模块分为5层. 1)DB层,即数据库层 在则一部分,我使用的数据库为mysql.在EJB程序中,访问数据库是通 ...

  2. C# 基元类型

    C#编程中,初始化一个整数有两种方式: (1).较繁琐的方法,代码如下: Int32 a = new Int32(); (2).极简的方法,代码如下: ; 对比两种方法,分析如下: 第一种:过于繁琐, ...

  3. Css权重解析

    Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...

  4. JDK1.10+scala环境的搭建之linux环境（centos6.9）

    ---恢复内容开始--- 第一步:安装jdk1.10版本 进入网页 http://oracle.com/technetwork/java/javase/downloads/index.html  下载 ...

  5. HTML BODY 背景图片

    内嵌: background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景 ...

  6. SPSS学习系列之SPSS Modeler的帮助文档怎么调出来使用？

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

  7. C语言中判断字符串str1是否以str2开始或结束

    #include <stdlib.h> #include <string.h> #include <stdio.h> /**判断str1是否以str2开头 * 如果 ...

  8. 一个基于Socket的http请求监听程序实现

    首先来看以下我们的需求: 用java编写一个监听程序,监听指定的端口,通过浏览器如http://localhost:7777来访问时,可以把请求到的内容记录下来,记录可以存文件,sqlit,mysql ...

  9. Tomcat 配置上传文件到项目外的路径

    使用 Tomcat 作为服务器的时候,将上传文件保存在项目路径下,每次重启服务或者打成 war 包的时候很容易丢失上传的文件,于是我们配置 Tomcat 把文件保存到项目外的其他磁盘路径: 1. 打开 ...

  10. [CTSC 2018]假面

    Description 题库链接 有 \(n\) 个敌方单位,初始第 \(i\) 个单位的血量为 \(m_i\) .共 \(Q\) 次操作,分两种: 对某一个单位以 \(p\) 的概率造成 \(1\) ...