DC.js 气泡图
气泡图用于显示数据的三个维度。它是散点图的一种变体，其中数据点被替换为气泡。气泡大小相对于数据维度表示。它使用水平轴和垂直轴作为值轴。本章详细介绍气泡图。
气泡图方法
在继续绘制气泡图之前，我们应该了解
dc.bubbleChart 类及其方法。 dc.bubbleChart 使用 mixins 来获得绘制图表的基本功能，如下所示-
dc.bubbleMixin
dc.coordinateGridMixin
dc.bubbleChart 的完整类图如下-
dc.bubbleChart 获取了上面指定的 mixin 的所有方法。它也有自己的绘制气泡图的方法，下面解释-
elasticRadius([[radius]])
此方法用于启用气泡[radius][radius]。如果我们禁用此功能，则气泡[radius][radius]将自动重新缩放。
sortBubbleSize( [sortBubbleSize])
此方法用于启用气泡中的排序功能。较小的气泡会先出现，然后逐渐增大。
绘制气泡图
让我们在 DC 中绘制气泡图。为此，我们需要按照以下步骤操作-
第一步：定义一个变量
让我们定义一个如下所示的变量-
var chart = dc.bubbleChart('#bubble');
这里，bubbleChart 函数与 id 气泡映射。
第 2 步：读取数据
从
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
....................
.....................
第 3 步：获取记录
让我们使用下面给出的编码获取记录-
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 轴的高度和宽度范围。
第 4 步：设置尺寸
我们可以使用下面给出的编码设置维度-
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
分配维度后，使用下面给出的编码对性别进行分组-
var genderGroup = genderDimension.group().reduceCount();
第 5 步：生成图表
现在，使用下面给出的编码生成气泡图-
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。
接下来，我们已经指定了边距点。
然后我们分配了性别维度和组。
键和值访问器返回气泡中的键和值。
使用公式-Math.floor((p.value/10)) + 1 计算[radius][radius]值访问器函数。
第 6 步：画气泡
现在，使用下面给出的编码绘制气泡-
.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][radius]线性比例值。
我们将最小[radius][radius]标签值指定为 1000，将 x 轴和 y 轴填充值分别指定为 200 和 100。
接下来，我们将最大气泡相对大小值指定为 0.7、
渲染水平和垂直网格线，然后使用气泡键和值的标题进行映射。
第 7 步：设置 TickFormat
使用下面给出的编码设置 x 和 y 轴的票证格式-
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
最后，使用
chart.render() 方法渲染图表。
第 8 步：工作示例
完整的代码清单如以下代码块所示。创建一个网页
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>
现在，请求浏览器，我们将看到以下响应。
