14、D3.js 数据可视化：从基础图表到复杂布局

D3.js 数据可视化：从基础图表到复杂布局

1. 气泡图与柱状图实现

在数据可视化中，气泡图和柱状图是常用的图表类型。下面我们将详细介绍如何使用 D3.js 实现这两种图表。

1.1 气泡图

气泡图的实现主要涉及对 SVG 圆形元素的操作。以下是关键代码：

_bodyG.selectAll("circle._" + i)
  .data(list)
  .style("stroke", function (d, j) { 
    return _colors(j); 
  })
  .style("fill", function (d, j) { 
    return _colors(j); 
  })
  .transition()
  .attr("cx", function (d) { 
    return _x(d.x); 
  })
  .attr("cy", function (d) { 
    return _y(d.y); 
  })
  .attr("r", function (d) { 
    return _r(d.r); 
  });

上述代码中，我们通过 _bodyG 选择所有的圆形元素，并绑定数据。然后设置圆形的边框和填充颜色，接着进行过渡动画，最后设置圆形的圆心坐标和半径。

1.2 柱状图

柱状图的实现相对复杂一些，以下是主要步骤：
1. 准备工作 ：打开指定的 HTML 文件