黄金安魂曲的知识太空舱

在数据可视化的过程中，往往需要将一个值转换为另一个值。例如要绘制一个历年产值的柱状图，我们需要把3000万的产值投射为屏幕上300个像素的高度。以数学上的“函数”为例：y=2x+1。在这里，x的取值范围假定为[0, 2]，这称为“定义域”。则y的取值范围为[1, 5]，这称为“值域”。通过一个函数式提供了定义域到值域的对应关系，D3提供了将一个量转换为另一个量的方法，称为“比例尺”（Scale）。

坐标轴（Axis）就是比例尺在界面上的直观显示，所以坐标轴必须要和一个比例尺进行绑定。d3.js提供了现成的语法代码，可以很方便的画出坐标抽。如下：body> script> var width = 600; var height = 600; var svg = d3.select("body").append("svg")

D3的全称是“Data-Driven Documents”，它是一个Javascript的函数库，用来做数据可视化的。不同于其他的图表组件，例如Highcharts等，它在图表的生成及与用户的数据交互方面提供了更大的灵活性。生成的图表基于SVG格式，以数据为驱动。其核心是“Data-Join”，即数据绑定。它解决了两个核心问题：如何根据数据添加元素；当数据发生更新的时候，如何修改元素；

选择集的常用操作选择集有一个常用的方法，包括：过滤filter——根据指定的条件对选择集进行过滤；排序sort——根据被绑定的数据对选择集的元素进行排列，默认为升序排列；遍历each——循环处理每一个选择集的元素；如下代码所示：body> script> var dataset = [10, 20, 30, 40, 50]; va

线段在SVG中，线段的元素是，或者也可以绘制线段。所以d3代码为如下形式：// line形式添加线段svg.append("line") .attr("x1", 20).attr("y1", 20) .attr("x2", 300).attr("y2", 100) .attr("stroke", "black");// path形式添加线

弧（饼）弧生成器d3.arc()可以生成圆形或环形的扇形。它有四个数据访问器：arc.innerRadius([radius])——内半径；arc.OuterRadius([radius])——外半径；startAngle([angle])——起始弧度；endAngle([angle])——终止弧度；var dataset = { startAngle : 0, endA