黄金安魂曲-CSDN博客

原创 D3.js学习总结（六）——基本绘制（2）

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

2018-01-26 16:03:35 1418 1

原创 D3.js学习总结（五）——基本绘制（1）

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

2018-01-26 15:50:18 1767 1

原创 D3.js学习总结（四）——坐标轴

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

2018-01-22 10:50:06 3550

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

2018-01-22 10:29:58 1521

原创 D3.js学习总结（二）——基础知识（2）

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

2018-01-08 11:24:08 461

原创 D3.js学习总结（一）——基础知识（1）

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

2018-01-08 08:57:03 503

黄金安魂曲的知识太空舱