3、D3 数据可视化：选择、绑定与图形绘制

D3 数据可视化：选择、绑定与图形绘制

1. 可复用组件添加图形元素

在数据可视化中，有时候我们展示的数据图表可能只是最基础的，缺乏必要的元素，例如 Figure 2 - 2 仅展示了数据，却没有显示比例尺。这一点尤为重要，因为两个数据集的数值范围差异较大，没有比例尺和坐标轴，就无法从图表中读取定量信息，所以我们需要为现有图表添加坐标轴。

坐标轴是复杂的图形元素，因为它们需要管理刻度线和刻度标签。不过，D3 提供了坐标轴工具，给定一个比例尺对象（定义了定义域、值域以及它们之间的映射），它就能生成并绘制所有所需的图形元素。由于可视化的坐标轴组件由许多单独的 SVG 元素（用于刻度线和标签）组成，所以应该始终在其自己的 <g> 容器内创建。应用于这个父元素的样式和变换会被坐标轴的所有部分继承，这很重要，因为所有坐标轴最初都位于原点（左上角），必须使用 transform 属性将它们移动到所需的位置。

下面是一个示例代码，展示了如何使用可复用组件添加图形元素和坐标轴：

function makeDemo3() {
    d3.tsv( "examples-multiple.tsv" )
      .then( function( data ) {
            var svg = d3.select( "svg" );                         
            var pxX = svg.attr( "width" );