气泡图用于显示数据的三个维度.它是散点图的变体，其中数据点被气泡替换.气泡大小相对于数据维度表示.它使用水平轴和垂直轴作为值轴.本章详细介绍了气泡图.
在继续绘制气泡图之前，我们应该了解 dc.bubbleChart 类及其方法. dc.bubbleChart使用mixins来获得绘制图表的基本功能，这些功能列在下面和下面;
dc.bubbleMixin
dc.coordinateGridMixin
dc.bubbleChart的完整类图如下 :
dc.bubbleChart获取上述mixin的所有方法.它也有自己绘制气泡图的方法，下面将对其进行解释 :
使用此方法启用气泡半径.如果我们禁用它，那么气泡半径将自动重新缩放.
此方法用于启用排序泡泡中的特征.较小的气泡将首先出现，然后逐渐增加.
让我们在DC绘制气泡图.要做到这一点，我们需要按照下面给出的步骤 : 去;
让我们定义一个变量，如下所示 :
var chart = dc.bubbleChart('＃bubble');这里，bubbleChart函数与id气泡映射.
从 howell1.csv 文件中读取数据.
d3.csv(" data/howell1.csv"，function(errors，people){
var mycrossfilter = crossfilter(people);
}如果数据不存在，然后返回错误.现在，将数据分配给交叉过滤器.这里，我们已经下载了howell1.csv文件.这里将使用相同的文件，它看起来类似于下面的代码块.
"height","weight","age","male" 151.765,47.8256065,63,1 139.7,36.4858065,63,0 136.525,31.864838,65,0 156.845,53.0419145,41,1 145.415,41.276872,51,0 163.83,62.992589,35,1 149.225,38.2434755,32,0 168.91,55.4799715,27,1 147.955,34.869885,19,0 165.1,54.487739,54,1 154.305,49.89512,47,0 .................... .....................
让我们使用下面给出的编码来获取记录;
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});在这里，我们检查了性别，并使用上面的公式设置了x轴高度和宽度范围.
我们可以使用下面给出的编码设置维度 :
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});在指定维度后，使用下面给出的编码对性别进行分组 :
var genderGroup = genderDimension.group().reduceCount();
现在，使用下面给出的编码生成气泡图;
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})此处，
我们已将图表宽度指定为1200，高度指定为400.
接下来，我们指定了保证金点.
然后我们分配了性别维度和组.
键和值访问器返回气泡中的键和值.
C使用公式 - Math.floor((p.value/10))+ 1 计算半径值存取函数.
现在，使用下面给出的编码绘制气泡 :
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});此处，
d3.scale .linear函数用于构造一个新的线性刻度，其x轴的指定域范围为[0,240].
同样，我们分配了y和radius线性刻度值.
我们将最小半径标签值指定为1000，x轴和y轴填充值分别为200和100.
接下来，我们将最大气泡相对大小值指定为0.7.
渲染水平和垂直网格线，然后映射泡泡键和值的标题.
使用下面给出的编码设置x和y轴的票证格式;
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});最后，使用 chart.render()方法渲染图表.
完整的代码清单如以下代码块所示.创建一个网页 bubble.html 并添加以下更改.
<html>
<head>
<title>Bubble chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>现在，请求浏览器，我们会看到以下回复.
