dc.js 气泡图不显示气泡。分组 returns 空数组
dc.js bubble chart doesn't display bubbles. Grouping returns empty array
基本上没有显示气泡,因为我用于图表的组是空的。
我的数据结构是什么样的:
[{
"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
}]
我想为我的数据源中的每一行显示一个气泡。我创建了一个基于季度的维度(我也尝试过使用日期字段但结果相同)和一个基于值字段的组(每个值都是一个唯一的浮点数)。但是当在控制台中打印结果组时,它 returns 是一个空数组。现在我不确定是否有可能按照我的想法去做。
其余代码:
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();
这是一张我期望图表的图片。
这里有很多问题,但最主要的是为您想要的可视化正确定义您的组。这是您的 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'));
基本上没有显示气泡,因为我用于图表的组是空的。
我的数据结构是什么样的:
[{
"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
}]
我想为我的数据源中的每一行显示一个气泡。我创建了一个基于季度的维度(我也尝试过使用日期字段但结果相同)和一个基于值字段的组(每个值都是一个唯一的浮点数)。但是当在控制台中打印结果组时,它 returns 是一个空数组。现在我不确定是否有可能按照我的想法去做。
其余代码:
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();
这是一张我期望图表的图片。
这里有很多问题,但最主要的是为您想要的可视化正确定义您的组。这是您的 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'));