使用DC.js和交叉过滤器的组合图(条形和线条)，当bar值=0时，线条消失
使用DC.js和交叉过滤器的组合图(条形和线条)，当bar值=0时，线条消失
提问于 2018-04-12 16:05:26
当测度的最后值为零时，线在复合图中消失。我有电码笔
这是我的样本数据：
var data = [
{ "ID": 1, "TxDate": "2017/12/30", "InstCode": "Loc1", "NTS": 7, "NTS2": 1 },
{ "ID": 2, "TxDate": "2017/12/31", "InstCode": "Loc1", "NTS": 14, "NTS2": 6 },
{ "ID": 3, "TxDate": "2017/12/31", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 4, "TxDate": "2017/12/30", "InstCode": "Loc2", "NTS": 1, "NTS2": 1 },
{ "ID": 5, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 2, "NTS2": 1 },
{ "ID": 6, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 1, "NTS2": 1 },
{ "ID": 7, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 3, "NTS2": 4 },
{ "ID": 8, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 9, "TxDate": "2018/01/04", "InstCode": "Loc1", "NTS": 1, "NTS2": 1 },
{ "ID": 10, "TxDate": "2018/01/02", "InstCode": "Loc2", "NTS": 4, "NTS2": 1 },
{ "ID": 11, "TxDate": "2018/01/03", "InstCode": "Loc1", "NTS": 22, "NTS2": 14 },
{ "ID": 12, "TxDate": "2018/01/02", "InstCode": "Loc1", "NTS": 2, "NTS2": 0 },
{ "ID": 13, "TxDate": "2018/01/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 0 },
{ "ID": 14, "TxDate": "2018/01/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 0 },
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 3 }
];
var yearPieChart = dc.pieChart("#year-pie-chart");
var monthBarChart = dc.barChart("#month-bar-chart");
var composite = dc.compositeChart('#compo-bar-line-chart');问题是，当“NTS”的最后一个值为1时，就会出现复合图。如果我更改下面一行
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 0, "NTS2": 3 }至
{ "ID": 15, "TxDate": "2018/02/04", "InstCode": "Loc2", "NTS": 1, "NTS2": 3 }将出现复合图。即使值"NTS"：0非常感谢您的帮助，也有任何方法显示该图形吗？
复合条形码：
composite
.width(1200).height(450)
.margins({ top: 20, bottom: 90, right: 10, left: 70 })
.x(d3.scale.ordinal().domain(nonEmptytxNTSGroup))
.xUnits(dc.units.ordinal)
//.xAxisLabel('Date')
.yAxisLabel("NTS")
.elasticX(true)
.elasticY(true)
//.rightYAxisLabel('Final Treatments')
.group(nonEmptytxNTSGroup)
.renderLabel(true)
._rangeBandPadding(1)
.compose(
[
dc.barChart(composite)
.gap(1)
.centerBar(true)
.group(nonEmptytxNTSGroup)
.elasticX(true)
.elasticY(true)
.renderLabel(true),
dc.lineChart(composite)
.group(nonEmptytxFinalTxGroup)
.useRightYAxis(false)
.colors('red')
.elasticX(true)
.elasticY(true)
.renderDataPoints({
radius: 10,
fillOpacity: 5.5,
strokeOpacity: 5.8
})
.renderLabel(true)
]
);
composite.renderlet(function (composite) {
composite.selectAll("g.x text")
.attr('dx', '-35')
//.select("g.axis.y")
//.attr("transform", "rotate(-45)");
.attr('transform', "translate(-10,0) rotate(-65)");
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-13 20:00:57
在一个综合图表中，所有的子图表都将共享相同的X标度。这是由给定给父(复合)图的组确定的。
在您的示例中，您使用条形图的组作为复合图表组。如果线条图的组中有任何不在条形图组中的键，则拒绝绘制。(具体来说，它的结果是行中的一些NaN，对于标度中不存在的X值，然后进行理智检查，将其重置为空行。)
解决这一问题的最简单方法是不使用remove_empty_bins。然后，域将始终匹配这两个图表。
更复杂但更健壮的方法是使用通常用于堆叠图表的解决方案，其中所有堆栈也必须在它们的X域中匹配。
function combine_groups() { // (groups...)
var groups = Array.prototype.slice.call(arguments);
return {
all: function() {
var alls = groups.map(function(g) { return g.all(); });
var gm = {};
alls.forEach(function(a, i) {
a.forEach(function(b) {
if(!gm[b.key]) {
gm[b.key] = new Array(groups.length);
for(var j=0; j<groups.length; ++j)
gm[b.key][j] = 0;
}
gm[b.key][i] = b.value;
});
});
var ret = [];
for(var k in gm)
ret.push({key: k, value: gm[k]});
return ret;
}
};
}从非空组中生成一个组合组，如下所示：
var combined = combine_groups(nonEmptytxNTSGroup, nonEmptytxFinalTxGroup);将其交给复合图表以设置公共域：
composite
// ...
.group(combined)告诉每个子图表从一个合并值中提取其值：
.compose(
[
dc.barChart(composite)
// ...
.group(combined, "1", function(kv) { return kv.value[0]; })
// ...
dc.lineChart(composite)
.group(combined, "2", function(kv) { return kv.value[1]; })
// ...
]现在，您有了一个复合图表，它将使用两个非空组域的联合。请注意，这还将强制子图表具有相同的域:任何跳过的值现在将设置为0：
在这里，最后一条是零，但它的0标签仍然绘制，因为线图有一个非零的值在那里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49801220
复制相关文章
相似问题
腾讯云开发者
