摘要：
页面效果: 阅读全文
摘要：
假设有如下数据需要可视化： 这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据. 1. 布局 定义一个布局: 返回值赋给变量 pie，此时 pie 可以当做函数使用 阅读全文
摘要：
用户用于交互的工具一般有三种：鼠标、键盘、触屏。 1. 添加交互 对某一元素添加交互操作十分简单，代码如下： 这段代码在 SVG 中添加了一个圆，然后添加了一个监听器，是通过 on() 添加的。在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。 on() 的第一个参数是监听的事件， 阅读全文
摘要：
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。 如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就 阅读全文
摘要：
D3 提供了 4 个方法用于实现图形的过渡： - transition() 启动过渡效果，其前后是图形变化前后的状态（形状、位置、颜色等等），例如： D3 会自动对两种颜色（红色和蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。 - duration() 指定过渡的持续时间，单位为毫 阅读全文
摘要：
一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。 (1) 添加SVG画布 (2) 定义数据和比例尺 (3) 定义坐标轴 (4) 添加矩形和文字元素 (5) 添加坐标轴的元素 页面效果: 阅读全文
摘要：
坐标轴: 是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。 - 坐标轴的组成 在 SVG 画布的预定义元素里，有六种基本图形： 矩 阅读全文
摘要：
html代码: 页面效果: 1.选择元素和绑定数据 - 选择元素 (1) select(): 选择所有指定元素的第一个 页面效果: (2) selectAll():选择所有指定元素的全部 页面效果: - 绑定数据 (1) datum():绑定一个数据到选择集上 页面效果: 上面的代码中，用到了一个无 阅读全文
摘要：
1.Array.from() Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）对象。 下面是一个类似数组的对象，Array.from将它转为真正的数组。 只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。 以上代码中，字 阅读全文
摘要：
ES6在Math对象上新增了17个与数学相关的方法。所有这些方法都是静态方法，只能在Math对象上调用。 1.Math.trunc() Math.trunc方法用于去除一个数的小数部分，返回整数部分。 对于非数值，Math.trunc内部使用Number方法将其先转为数值。 对于空值和无法截取整数的 阅读全文