使用DC.js和交叉过滤器的复合图（条形图和线形图），当条形值= 0时线消失
萨姆斯
当小数的最后一个值为零时，该线在合成图中消失。我这里有密码笔
这是我的示例数据：
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)");
});
高登
在复合图表中，所有子图表将共享相同的X比例尺。这由指定给父（综合）图表的组确定。
在您的示例中，您将条形图的组用于复合图组。如果折线图的组中的任何键不在条形图的组中，则它拒绝绘制。（具体来说，NaN对于刻度中不存在的X值，它最后在行中以s开头，然后进行完整性检查将其重置为空行。）
解决此问题的最简单方法是不使用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标签，因为折线图在那里具有非零值。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
IE 11中的FormData未定义
- 3
计算数据帧R中的字符串频率
- 4
如何在R中转置数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
Excel 2016图表将增长与4个参数进行比较
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 9
OpenCv：改变 putText() 的位置
- 10
ActiveModelSerializer仅显示关联的ID
- 11
算术中的c ++常量类型转换
- 12
如何开始为Ubuntu开发
- 13
将加号/减号添加到jQuery菜单
- 14
去噪自动编码器和常规自动编码器有什么区别？
- 15
获取并汇总所有关联的数据
- 16
OpenGL纹理格式的颜色错误
- 17
在 React Native Expo 中使用 react-redux 更改另一个键的值
- 18
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 19
TreeMap中的自定义排序
- 20
Redux动作正常，但减速器无效
- 21
如何对treeView的子节点进行排序
我来说两句