Based on this question,我能够使用dc.js和带标签的d3.js创建条形图。然而,我把条形图变成了一个堆积条形图(基于this documentation),而且我很难显示每个堆栈的标签。如何使用dc.js和d3.js显示值叠加条形图?
例如下面的图表中的每个堆应该显示的数目,但它示出的翻译:
查看下列代码和这里codepen
的Javascript
var data = [{Category: "A", ID: "1A"}, {Category: "A", ID: "1A"}, {Category: "A", ID: "1A"}, {Category: "A", ID: "2B"}, {Category: "A", ID: "2B"}, {Category: "B", ID: "1A"}, {Category: "B", ID: "1A"}, {Category: "B", ID: "1A"}, {Category: "B", ID: "2B"}, {Category: "B", ID: "3C"}, {Category: "B", ID: "3C"}, {Category: "B", ID: "3C"}, {Category: "B", ID: "4D"}, {Category: "C", ID: "1A"}, {Category: "C", ID: "2B"}, {Category: "C", ID: "3C"}, {Category: "C", ID: "4D"}, {Category: "C", ID: "4D"}, {Category: "C", ID: "5E"}];
var ndx = crossfilter(data);
var XDimension = ndx.dimension(function (d) {return d.Category;});
var YDimension = XDimension.group().reduce(
function reduceAdd(p, d) {
p[d.ID] = (p[d.ID]|| 0) + 1;
return p;
},
function reduceRemove(p, d) {
p[d.ID] = (p[d.ID]|| 0) -1;
return p;
},
function reduceInitial() {
return {};})
dc.barChart("#Chart")
.width(480).height(300)
.dimension(XDimension)
.group(YDimension,"1A",function(d) {return d.value["1A"];})
.stack(YDimension,"2B",function(d) {return d.value["2B"];})
.stack(YDimension,"3C",function(d) {return d.value["3C"];})
.stack(YDimension,"4D",function(d) {return d.value["4D"];})
.stack(YDimension,"5E",function(d) {return d.value["5E"];})
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scale.ordinal().domain(XDimension))
.renderlet(function (chart) {
//Check if labels exist
var gLabels = chart.select(".labels");
if (gLabels.empty()){
gLabels = chart.select(".chart-body").append('g').classed('labels', true);
}
var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);
gLabelsData.exit().remove(); //Remove unused elements
gLabelsData.enter().append("text") //Add new elements
gLabelsData
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.text(function(d){
text_object = d3.select(d).data()[0].data.value
return text_object
})
.attr('x', function(d){
return +d.getAttribute('x') + (d.getAttribute('width')/2);
})
.attr('y', function(d){ return +d.getAttribute('y') + 15; })
.attr('style', function(d){
if (+d.getAttribute('height') < 18) return "display:none";
});
})
dc.renderAll();
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="https://cdnjs.site44.com/dc3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<div id='Chart'></div>
</body>
我不明白这个问题和另一个问题之间的区别 - 请关闭一个或另一个。 http://stackoverflow.com/q/39580578/676195 – Gordon
我不建议使用第一部分答案中的代码来链接问题 - 这不是惯用的d3代码,很难排除故障。如果您使用@dimirc提供的第二个代码,它将显示所有堆栈的标签。顺便提一下,现在为条形图实现了['renderLabel'](https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.baseMixin+renderLabel) - 但它只是为顶部酒吧绘制标签。如果您关心为dc.js做出贡献,则可以添加一个选项为所有小节绘制标签。 – Gordon
使用其他代码的Codepen叉,显示所有堆栈的标签:http://codepen.io/gordonwoodhull/pen/xERGVE?editors=1010 – Gordon