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>

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