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

Question

基本上，不会显示气泡，因为我用于图表的组是空的。

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

[{
  "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

这是我期望的图表的图片。

Answer 1

这里有很多问题，但主要是让您的组为您想要做的可视化正确定义。这是您的 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'));