📌  相关文章
📜  DC.js-气泡图

📅  最后修改于: 2020-10-25 09:52:51             🧑  作者: Mango

气泡图用于显示数据的三个维度。它是散点图的一种变体，其中的数据点被替换为气泡。气泡大小是相对于数据维度表示的。它使用水平和垂直轴作为值轴。本章将详细介绍气泡图。

气泡图方法

在继续绘制气泡图之前，我们应该了解dc.bubbleChart类及其方法。 dc.bubbleChart使用mixins获取绘制图表的基本功能，下面列出了这些内容-

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChart的完整类图如下-

气泡图方法

dc.bubbleChart获取上述指定的mixin的所有方法。它也有自己的绘制气泡图的方法，下面说明-

elasticRadius（[半径]）

此方法用于启用气泡半径。如果禁用此选项，则气泡半径将自动重新缩放。

sortBubbleSize（[sortBubbleSize]）

此方法用于启用气泡中的排序功能。较小的气泡将首先出现，然后逐渐增加。

绘制气泡图

让我们在DC中绘制一个气泡图。为此，我们需要遵循以下步骤-

步骤1：定义变数

让我们定义一个变量，如下所示：

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计算半径值访问器函数。

步骤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并对其进行以下更改。

Bubble chart Sample

现在，请求浏览器，我们将看到以下响应。