如何使用dc.js和d3.js顯示值疊加條形圖？

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>

來源

2016-09-19 Chris

我不明白這個問題和另一個問題之間的區別 - 請關閉一個或另一個。 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

通常，我在這些情況下所做的就是在有問題的線路上放置一個斷點，並查找對象是否包含我想要的其他位置的數據。

看起來你可以在這裏使用.datum().y：

text_object = d3.select(d).datum().y

http://codepen.io/gordonwoodhull/pen/EgNvNr?editors=1010

這仍然是（使用DOM元素作爲數據資料其他一些加入一種奇怪的代碼元素很哈克），但希望這會讓你感動。

來源

2016-09-20 22:50:00 Gordon

非常感謝，因爲我花了數小時試圖弄清楚這一點！這絕對讓我感動！再次感謝。 – Chris

如何使用dc.js和d3.js顯示值疊加條形圖？

回答

相關問題