DC.js - 气泡图

上一页
下一页

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

气泡图方法

在绘制气泡图之前，我们应该了解dc.bubbleChart类及其方法。dc.bubbleChart使用mixins来获得绘制图表的基本功能，这些功能列在下面：

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChart的完整类图如下所示：

Bubble Chart Methods

dc.bubbleChart获取上述mixins的所有方法。它也有自己绘制气泡图的方法，解释如下：

elasticRadius( [radius])

此方法用于启用气泡半径。如果我们禁用此功能，则气泡半径将自动重新缩放。

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);
}

如果数据不存在，则返回错误。现在，将数据分配给crossfilter。这里，我们已经下载了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函数用于使用指定的域范围[0,240]为x轴构造一个新的线性比例。

  • 类似地，我们分配了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>

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

打印页面
上一页
下一页
广告