我有一个使用 dc.js 构建的气泡图其中气泡被隐藏起来。是否有属性可以避免这种行为?
这是代码:
payerBubbleChart = dc.bubbleChart('#payer-chart');
payerBubbleChart
.width(450).height(chartHeight).transitionDuration(1500).margins({
top: 20,
right: 50,
bottom: 30,
left: 40
})
.dimension(payerDim)
.group(payerGroup)
.colors(colorbrewer.RdYlBu[9])
.colorDomain([0, 100])
.colorAccessor(function(d) {
return (d.value.denialCount / d.value.claimCount);
})
.keyAccessor(function(p) {
return p.value.denialCount;
})
.valueAccessor(function(p) {
return p.value.revenue;
})
.radiusValueAccessor(function(d) {
return (d.value.claimCount / 100);
})
.maxBubbleRelativeSize(0.3).x(d3.scale.linear()).y(d3.scale.linear())
.r(d3.scale.linear().domain([0, 100]))
.elasticY(true).elasticX(true)
.yAxisPadding(100).xAxisPadding(100)
.renderHorizontalGridLines(true).renderVerticalGridLines(true)
.xAxisLabel('Denial Amount').yAxisLabel('Revenue')
.renderLabel(true).label(function(p) {
return p.key;
})
.renderTitle(true)
.title(function(p) {
return ['NDC: ' + p.key,
'Revenue: $' + formatNumber(p.value.revenue, 1000, "k"),
'Claims: ' + formatNumber(p.value.claimCount, 1000, "k"),
'Denials: $' + formatNumber(p.value.denialCount, 1000, "k")
]
.join('\n');
})
.yAxis().tickFormat(function(v) {
return "$" + formatNumber(v, 1000, "k");
});
payerBubbleChart
.xAxis().tickFormat(function(v) {
return "$" + formatNumber(v, 1000, "k");
});
payerBubbleChart.xAxisMin = function() {
return 0;
};
payerBubbleChart.yAxisMin = function() {
return 0;
};
我为 .x
或 .r
应用了 d3.scale.log
?并且图表消失。
最佳答案
至少有两种方法可以解决这个问题。一种是使用 xAxisPadding
和 yAxisPadding
将图表移至气泡之外。
这些是以域为单位的,因此 100 对于您的值来说非常小,您的值有数千个。另外,您还故意使用 yAxisMin
、yAxisMax
技巧停在 0 处。
解决这个问题的另一种方法是简单地删除裁剪,以便气泡部分绘制在图表之外,如@tttp 在相关问题中所示:
dc.bubbleChart('#bubbly')
.on('renderlet', function(chart, filter){
chart.svg().select(".chart-body").attr("clip-path",null);
})
https://github.com/dc-js/dc.js/issues/998#issuecomment-216558123
此外,这个问答是 How to avoid truncated bubbles when elasticX or elasticY 的扩展。 .
关于javascript - 避免在直流图表中隐藏/切割气泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39391701/