dc.js气泡图不显示气泡。分组返回空数组

时间:2015-12-22 13:05:23

标签: dc.js crossfilter

基本上,没有显示气泡,因为我用于图表的组是空的。

我的数据结构是什么样的:

[{
  "site": "Site",
  "service": "Long Term Care",
  "value": 67.52,
  "quarter": "Q1",
  "date": "2015-02-13T22:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 67.19,
  "quarter": "Q2",
  "date": "2015-05-15T21:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 66.87,
  "quarter": "Q3",
  "date": "2015-08-14T21:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Long Term Care",
  "value": 66.57,
  "quarter": "Q4",
  "date": "2015-11-14T22:00:00.000Z",
  "groupId": 1
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 75.36,
  "quarter": "Q1",
  "date": "2015-02-13T22:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 75,
  "quarter": "Q2",
  "date": "2015-05-15T21:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 74.65,
  "quarter": "Q3",
  "date": "2015-08-14T21:00:00.000Z",
  "groupId": 2
}, {
  "site": "Site",
  "service": "Assisted Living",
  "value": 74.31,
  "quarter": "Q4",
  "date": "2015-11-14T22:00:00.000Z",
  "groupId": 2
 }]

我想为数据源中的每一行显示一个气泡。我创建了一个基于季度的维度(我也尝试使用日期字段但结果相同)和基于值字段的组(每个值都是唯一的浮点数)。但是在控制台中打印生成的组时,它返回一个空数组。现在我不确定是否有可能做到我的想法。

其余代码:

ndx = crossfilter(myData);
dateDimension = ndx.dimension(dc.pluck('quarter'));
print_filter(dateDimension);
valueGroup = dateDimension.group(dc.pluck('value'));
print_filter(valueGroup);
minValue = dateDimension.bottom(1)[0].value;
maxValue = dateDimension.top(1)[0].value;
testChart = dc.bubbleChart("#test-chart");
testChart.width(850).height(350).dimension(dateDimension).group(valueGroup)
  .renderLabel(false)
  .maxBubbleRelativeSize(0.3)
  .radiusValueAccessor(function (p) {
        return p.value.value;
      })
  .x(d3.scale.ordinal().domain(["Q1", "Q2", "Q3", "Q4"]))
  .xUnits(dc.units.ordinal)
  .y(d3.scale.linear().domain([0, maxValue + 10])).yAxisLabel("", 20);
dc.renderAll();

Here is the JsFiddle

以下是我对图表的期望。to

1 个答案:

答案 0 :(得分:2)

这里有很多问题,但主要的是让你的组正确定义你想要做的可视化。以下是JSFiddle的更新,可以帮助您入门:https://jsfiddle.net/yewk7c0r/15/

群组的基本思想是在您的可视化所需的粒度级别定义您的维度,然后使用reduceSum定义您的群组(如果您想做平均值或​​类似的事情,则定义自定义群组):

ndx = crossfilter(myData);
dateDimension = ndx.dimension(function(d) {
    return [d.quarter, d.service];
});
valueGroup = dateDimension.group().reduceSum(dc.pluck('value'));