- DC.js 教程
- DC.js - 主页
- DC.js - 简介
- DC.js - 安装
- DC.js - 概念
- 交叉过滤器简介
- D3.js 简介
- DC.js - 混合
- DC.js-baseMixin
- DC.js - capMixin
- DC.js - colorMixin
- DC.js - marginMixin
- DC.js -坐标GridMixin
- DC.js - 饼图
- DC.js - 折线图
- DC.js - 条形图
- DC.js - 综合图表
- DC.js - 系列图表
- DC.js - 散点图
- DC.js - 气泡图
- DC.js - 热图
- DC.js - 数据计数
- DC.js - 数据表
- DC.js - 数据网格
- DC.js - 图例
- DC.js - 仪表板工作示例
- DC.js 有用资源
- DC.js - 快速指南
- DC.js - 有用的资源
- DC.js - 讨论
DC.js - 气泡图
气泡图用于显示数据的三个维度。它是散点图的变体,其中数据点被气泡替换。气泡大小是相对于数据维度来表示的。它使用水平轴和垂直轴作为值轴。本章详细介绍了气泡图。
气泡图方法
在继续绘制气泡图之前,我们应该了解dc.bubbleChart类及其方法。dc.bubbleChart 使用 mixins 来获取绘制图表的基本功能,如下所示 -
- dc.bubbleMixin
- dc.coordinateGridMixin
dc.bubbleChart 的完整类图如下 -
dc.bubbleChart 获取上面指定的 mixin 的所有方法。它还有自己的绘制气泡图的方法,解释如下 -
弹性半径([半径])
该方法用于启用气泡半径。如果我们禁用此功能,则气泡半径将自动重新缩放。
sortBubbleSize([sortBubbleSize])
该方法用于启用气泡中的排序功能。较小的气泡首先出现,然后逐渐增大。
绘制气泡图
让我们在 DC 中绘制一个气泡图。为此,我们需要遵循以下步骤 -
第 1 步:定义变量
让我们定义一个变量,如下所示 -
var chart = dc.bubbleChart('#bubble');
这里, bubbleChart 函数与 id bubble 进行映射。
第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 .................... .....................
第三步:获取记录
让我们使用下面给出的编码来获取记录 -
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();
第 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。
第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 和半径线性比例值。
我们将最小半径标签值指定为 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>
现在,请求浏览器,我们将看到以下响应。