DC.js - 散点图

散点图是一种数学图表.它使用笛卡尔坐标表示，通常显示一组数据的两个变量的值.数据显示为点的集合，点可能是彩色的.本章详细介绍散点图.

散点图方法

在继续绘制散点图之前，我们应该理解 dc.scatterPlot 类及其方法. dc.scatterPlot使用mixins来获得绘制图表的基本功能. dc.scatterPlot使用的mixin低于 :

• dc.coordinateGridMixin

dc.scatterPlot的完整类图如下 :

dc.scatterPlot获取上述mixins的所有方法.它有自己绘制散点图的方法，解释如下.

customSymbol([symbol])

此方法用于获取或设置符号生成器.

emptySize([size])

此方法用于设置或获取符号组的半径空白.

excludedColor([color])

此方法用于获取或设置从图表过滤器中排除的符号的颜色.

excludedOpacity([opacity])

此方法用于获取或设置从图表过滤器中排除的符号的不透明度.

excludedSize([size])

用于设置或获取从图表过滤器中排除的符号的大小.

highlightedSize ([size])

用于设置或获取高亮符号的半径.

符号([type])

用于获取或设置每个点使用的符号类型.

绘制散点图

让我们绘制如DC中的catter情节.在此示例中，让我们获取名为 howell1.csv 文件的数据集.样本数据文件如下 :

"height","weight","age","male"151.765,47.8256065,63,1139.7,36.4858065,63,0136.525,31.864838,65,0156.845,53.0419145,41,1145.415,41.276872,51,0163.83,62.992589,35,1149.225,38.2434755,32,0168.91,55.4799715,27,1147.955,34.869885,19,0165.1,54.487739,54,1154.305,49.89512,47,0..............................

上面的示例文件包含许多记录.我们可以通过单击以下链接下载该文件并将其保存到我们的DC位置.

howell1.csv

现在，让我们按照后续步骤在DC中绘制散点图.

步骤1:定义变量

让我们定义一个如下所示的变量 :

var chart = dc.scatterPlot('#screter ");

这里，scatterplot()函数使用id scatter进行映射.

步骤2:读取数据

从howell1.csv文件中读取数据，如下所示 :

d3.csv("data/howell1.csv", function(errors, people) {   var mycrossfilter = crossfilter(people);}

如果数据不存在，然后返回错误.稍后，将数据分配给交叉过滤器.

步骤3:获取记录

让我们使用下面给出的编码获取记录 :

people.forEach(function(x) {   if(x.male == 1) {      x.gender = "Male";   } else {      x.gender = "Female";   }});

在这里，我们检查了性别.

第4步:设置维度

您可以使用下面给出的编码设置维度;<

var hwDimension = mycrossfilter.dimension(function(data) {    return [Math.floor(data.height), Math.floor(data.weight)];});

在指定维度后，使用下面给出的编码对性别进行分组 :

var hwGroup = hwDimension.group().reduceCount();

步骤5:生成图表

现在，使用下面给出的编码生成热图;&/;

chart   .width(800)   .height(600)   .x(d3.scale.linear().domain([0,180]))   .y(d3.scale.linear().domain([0,100]))   .brushOn(false)   .xAxisLabel("Height")   .yAxisLabel("Weight")   .symbolSize(8)   .clipPadding(10)   .dimension(hwDimension)   .group(hwGroup);

此处，

• 我们已将图表宽度指定为800，高度为600.

• 对x轴和y轴应用d3.scale.linear()函数.

• 启用brushOn值为false .

• 然后，将x轴标签指定为高度，将y轴标签指定为权重.

• 将符号大小设置为8，将填充值设置为10.

• 最后，对数据进行分组并渲染图表.

步骤6:工作示例

完整的代码清单如下.创建一个网页 scatter.html 并添加以下更改.