Question

Based on this question，我能够使用带有标签的dc.js和d3.js创建条形图。但是，我将条形图转换为堆积条形图（基于this documentation），并且我很难显示每个堆栈的标签。

例如下图中的每个堆栈都应显示数字，但它显示[object Object]

请参阅下面的代码，此处参见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>

Answer 1

通常我在这些情况下做的是在相关的行上放置一个断点并四处查看该对象是否包含我想要的其他数据。

看起来你可以在这里使用.datum().y：

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

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

这仍然是一种奇怪的代码（使用DOM元素作为一些其他元素的数据连接的数据非常hacky）但希望这会让你感动。

如何使用dc.js和d3.js显示堆积条形图的值？

1 个答案: