D3.js
中古骑士1992
这个作者很懒,什么都没留下…
展开
-
D3.js简介与安装
1、D3是什么? data-drive-documentJavaScript库2、为什么要数据可视化?枯燥乏味的数据,用图片表示出来3、D3.js官网(英文好的话,学习的好地方)https:://d3js.org/4、使用方式一、下载zip包,在html中引入 ds.js文件即可二、直接引入网络文件。(需要联网)http://d3js.org/d3.v3....原创 2018-03-02 23:44:38 · 4601 阅读 · 0 评论 -
D3.js的第一个hello world程序
html中输出hello world<html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> <原创 2018-03-03 11:24:25 · 220 阅读 · 0 评论 -
D3.js选择元素与绑定数据
选择元素select() 返回选择元素的第一个selectAll() 返回所有满足条件的元素两者返回的结果都是选择集数据绑定 D3.js非常便利的一个功能,将网页元素如<p>和一个特定的数据如5 进行绑定。 D3中绑定数据有两个函数datum() 将一个数据绑定到选择集上<html><head> <meta cha...原创 2018-03-03 14:32:18 · 258 阅读 · 0 评论 -
D3.js中选择、删除、插入元素
1、选择元素 现在有一段html文件,body中有三个段落元素 <p>Apple</p> <p id="myid" class="myClass">pear</p> <p class="myClass">banana</p>选择第一个p d3.原创 2018-03-03 14:59:15 · 1902 阅读 · 0 评论 -
利用D3.js 做一个简单的图表
表格如下 1.”画布”是什么? 如果你想作图,你需要一个画布 html5 privode two,one is canvas,another is svgsvg 特点 1.svg绘制的是矢量图形,因此放大后不会失真 2.svg是基于xml的,可以为每个元素添加JavaScript事件 3.svg不适合游戏应用 4.每个图像都是一个对象,更改对象的属性,图形也会改变can...原创 2018-03-03 16:08:16 · 419 阅读 · 0 评论 -
D3.js中比例尺的使用
1.为什么要使用比例尺 将某一区域映射到另外一个区域,其大小关系不变 2.有哪些比例尺D3中的比例尺,很像数学中的函数给定一个x(定义域)。 也就确定了一个y(值域)。D3中称为domain和range。我们在使用时,需要给定domain和range的范围,便得到了一个映射关系线性比利尺将一个连续的区间,映射到另外一个区间 假设有如下数组 var dataset = ...原创 2018-03-03 18:29:06 · 614 阅读 · 0 评论 -
D3.js中坐标轴的使用
1.坐标轴的构成首先说明,svg是没有坐标轴这种元素的svg中一共有7中元素rect 矩形元素circle 圆形ellipse 椭圆line 线段polyline 折线polygon 多边形path 路径(这是最强大的元素)D3.js给我们提供了一个坐标轴组件d3.svg.axis()2.坐标轴的定义var dataset = [2.5, 2.1, 1....原创 2018-03-03 19:45:44 · 1019 阅读 · 0 评论