摘要:
假设有如下数据需要可视化: 这样的值是不能直接绘图的。例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组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():绑定一个数据到选择集上 页面效果: 上面的代码中,用到了一个无 阅读全文