<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. Android的相关事件

    Android的相关事件 1.Toast信息提醒 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; ...

  2. 【C#】override,Abstract,Virtual 介绍及区别--转载

    要扩展或修改继承的方法.属性.索引器或事件的抽象实现或虚实现,必须使用 override 修饰符. 1. override 方法提供从基类继承的成员的新实现.通过 override 声明重写的方法称为 ...

  3. __name__ == "__main__"的作用是什么？

    问题: __name__ == "__main__" 的作用是什么? # Threading example import time, thread def myfunction( ...

  4. Spring AOP 的实现

    软件152 余建强 1 使用 API 实现 AOP 新建一个用户接口:UserService package com.cqvie.aop.api; public interface UserServi ...

  5. UIKit 框架之UIAlertController

    IOS8之后增加了UIAlertController类,它可以表示UIAlertView和UIActionSheet.它继承自UIViewController. - (BOOL)application ...

  6. JavaScript unshift()函数移入数据到数组第一位

    你不仅可以 shift(移出)数组中的第一个元素,你也可以 unshift(移入)一个元素到数组的头部. .unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素, ...

  7. SpringMVC中数据转换

    SpringMVC中接收到的数据都是String形式,然后再根据反射机制将String转换成对应的类型.如果此时想接收一个Date类型,那么我们可以定义一个转换器来完成. 例如,我们有下面的Emp类: ...

  8. [LeetCode]Flatten Binary Tree to Linked List题解（二叉树）

    Flatten Binary Tree to Linked List: Given a binary tree, flatten it to a linked list in-place. For e ...

  9. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  10. CodeForces760B

    B. Frodo and pillows time limit per test:1 second memory limit per test:256 megabytes input:standard ...