d3库(d3.js) 持续整理

d3.js

d3.js是基于数据操作文档的js库，集强力可视化组建与数据驱动型的dom操作手法于一身。

本质上是js，在数据可视化方面，d3将生成可视化的步骤精简到了几个简单的函数。

来源：http://d3.decembercafe.org/pages/lessons/1.html

安装及使用

使用d3

1. 下载d3.js的文件 在html文件中包含即可

2. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   

预备知识

• html：设定网页内容
• css：设定网页样式
• javascript：设定网页行为
• dom：修改文档的内容和结构
• svg：缩放矢量图形，用于绘制可视化的图形

ide for mac

• IntelliJ IDEA
• Pycharm

d3语法

链式语法

d3.select("body").selectAll("p").text("hello world");

选择数据

使用d3.select()``````d3.selectAll()选择元素后返回的对象就是选择集

• d3.select()：选择所有指定元素的第一个
• d3.selectAll()：选择指定元素的全部
• 选择某个元素：
  • 加id号 select("#myid");
• 选择其中几个元素：
  • 添加class selectAll(".myclass");
• 对于已经绑定数据的选择集，可以运用无名函数function(d,i)，d为绑定的数据，i为索引号，可以用条件判定语句来选择元素。

绑定数据

绑定到dom上

• p.datum(data)：绑定一个数据data到选择集p上
• p.data(dataset)：绑定一个数组到选择集上，数据的各项值分别与选择集的各元素绑定

插入元素

• body.append(“p”) ：在body的末尾添加一个p元素
• body.insert(“p”,"#myid")：body中id为myid的元素前添加一个p元素

删除元素

var p=body.select("#myid");
p.remove();

做图表

画布

SVG

可缩放矢量图形，用于描述二维矢量图形的一种图形格式，使用xml格式来定义图形，可以直接嵌入html中显示。

特点：

• 矢量图，放大不失真
• 基于xml，可为每个元素添加javascript事件处理器
• 每个图形军事为对象，更改对象的属性，图形也会改变
• 不适合游戏

预定义元素

矩形

<rect>

属性：

• x ：矩形左上角的x坐标，x轴水平向右
• y ：矩形左上角的y坐标，y轴垂直向下
• width ： 矩形的宽度
• height ：矩形的高度

圆形

<circle>

属性：

• cx：圆心x坐标
• cy：圆心y坐标
• r：半径

椭圆

线段

<line>
属性：

• stroke：颜色
• strock-width：宽度

折线

多边形

路径

<path>

属性:

• d：

分组元素

<g>

文字

<text>

生成器

弧生成器

var arc=d3.svg.