目录
  1. WIKI教程
  2. 学习DC.js
  3. DC.js - 气泡图( Bubble Chart)

DC.js - 气泡图( Bubble Chart)

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

气泡图方法

在继续绘制气泡图之前，我们应该了解dc.bubbleChart类及其方法。 dc.bubbleChart使用mixins来获得绘制图表的基本功能，如下所示 -

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChart的完整类图如下 -

气泡图方法

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

elasticRadius( [radius])

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

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和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>

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

新页面打开
<上一篇.DC.js - 系列图表( Series Chart)
DC.js - 热图( Heat Map).下一篇>
↑回到顶部↑
WIKI教程 @2018