10、D3.js 组件与数据获取全解析

D3.js 组件与数据获取全解析

1. D3 组件概述

组件在 D3 中并非实体，而是一系列动作，尽管这些动作常使元素添加到 DOM 树中。以下是一些常见的 D3 布局和生成器：
- d3.chord() 布局 ：以圆形排列展示网络节点间的相互流动，常与 d3.arc() 和 d3.ribbon() 生成器配合使用。
- d3.links() 生成器 ：用于绘制分层数据集树形图中的分支，常与 d3.tree() 和 d3.cluster() 布局配合。
- d3.pack()、d3.treemap() 和 d3.partition() 布局 ：用于准备分层数据，以便在包含层次结构中显示。

2. 自定义组件

相较于丰富的生成器和布局，D3 内置组件较少。但组件是组织和简化工作的主要方式，它是接收选择集作为参数并对其进行操作的函数，无返回值，所有结果以副作用形式呈现。

2.1 简单组件示例

假设要在图表多处使用带圆角矩形及内部居中的文本标签，可创建 sticker() 函数：

function sticker( sel, label ) {                                  
    sel.append( "rect" ).attr( "rx", 5 ).attr( "ry", 5 )          
        .attr( "wid