14、D3.js数据可视化：多种图表的实现与应用

D3.js数据可视化：多种图表的实现与应用

1. 气泡图与柱状图的实现

1.1 气泡图

在某些气泡图实现中，会利用每个气泡的颜色来可视化第四个数据维度，但有人认为这种视觉表示难以理解且多余。以下是相关代码：

_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); 
  });

代码逻辑如下：
1. 设置 circle 元素的 stroke 和 fill 样式，颜色由 _colors 函数决定。
2. 通过过渡效果改变 circle 元素的 cx 、 cy 和 r 属性，分