在条形图中的条形顶部显示值

StackOverflow https://stackoverflow.com//questions/25026010

题

我有一个 x 轴为序数刻度的条形图。我想在每个条形的顶部或每个条形的底部显示 y 值。当鼠标悬停在条形图上时显示 y 值也是可以接受的。dc.js 中是否有函数或方法可以做到这一点？这里是 jsfiddle 我的代码在图片下方>

编辑：这是我的代码：超文本标记语言

<body>
    <div id='Chart'>
    </div>
</body>

JS

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group().reduceCount(function (d) {
    return d.value;
});


dc.barChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .transitionDuration(500)
    .xUnits(dc.units.ordinal)
    .label(function(d) {return d.value})
    .x(d3.scale.ordinal().domain(XDimension)) 

dc.renderAll();
有帮助吗？

解决方案

check更新 jsfiddle 

.renderlet(function(chart){

    var barsData = [];
    var bars = chart.selectAll('.bar').each(function(d) { barsData.push(d); });

    //Remove old values (if found)
    d3.select(bars[0][0].parentNode).select('#inline-labels').remove();
    //Create group for labels 
    var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id','inline-labels');

    for (var i = bars[0].length - 1; i >= 0; i--) {

        var b = bars[0][i];
        //Only create label if bar height is tall enough
        if (+b.getAttribute('height') < 18) continue;

        gLabels
            .append("text")
            .text(barsData[i].data.value)
            .attr('x', +b.getAttribute('x') + (b.getAttribute('width')/2) )
            .attr('y', +b.getAttribute('y') + 15)
            .attr('text-anchor', 'middle')
            .attr('fill', 'white');
    }

})
.

如果您不希望当栏重绘时可见标签（例如，当禁止用户筛选后/点击其他图表）时，可以将旧值的检查从de renderlet移动到to preredraw 听众。

.on("preRedraw", function(chart){

    //Remove old values (if found)
    chart.select('#inline-labels').remove();

})
.

替代

d3-ish方式

演示 jsfiddle 

.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){
        return d3.select(d).data()[0].data.value
    })
    .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.js 版本 3.* 中。你可以只使用 .renderLabel(true). 。它将在顶部打印该值

以下是使用renderlet方法的Hacky解决方案。 jsfiddle ： http://jsfiddle.net/tpsc5f9f/4/

js 

var barChart = dc.barChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .transitionDuration(500)
    .xUnits(dc.units.ordinal)
    .x(d3.scale.ordinal().domain(XDimension)) 

dc.renderAll();

barChart.renderlet(function(chart){
    moveGroupNames();
});


function moveGroupNames() {
   var $chart = $('#Chart'),
       bar  = $chart.find('.bar');

    bar.each(function (i, item) {
        var bar_top    = this.height.baseVal.value;
        var bar_left   = this.width.baseVal.value;
        var bar_offset_x = 30;
        var bar_offset_y = 33;

        var bar_val = $(this).find('title').html().split(':')[1];

        $chart.append('<div class="val" style="bottom:'+(bar_top+bar_offset_y)+'px;left:'+((bar_left*i)+(bar_offset_x))+'px;width:'+bar_left+'px">'+bar_val+'</div>');

    });
}
.

添加了css 

body {
    margin-top:20px;
}
#Chart {
    position:relative;
}

#Chart .val {
    position:absolute;
    left:0;
    bottom:0;
    text-align: center;
}
.

如果使用具有图表的专用ValueAccessor，您可以在DiMirc的“D3-ish Way”解决方案中进行以下替换。

更改

.text(function(d){
    return d3.select(d).data()[0].data.value
})
. 

.text(function(d){
    return chart.valueAccessor()(d3.select(d).data()[0].data)
});
.

此函数将将行图表的标签重新定位到每行的末尾。可以使用“Y”属性来用于条形图的类似技术。

  • 标签使用图表的TransuritionDuration
    • 将标签与RECT一起设置动画
  • 使用图表的valueaccessor函数
  • 使用图表的xaxis刻度来计算标签位置

rowChart.on('pretransition', function(chart) {
    var padding = 2;
        
    chart.selectAll('g.row > text') //find all row labels
        .attr('x', padding) //move labels to starting position
        .transition() //start transition
        .duration(chart.transitionDuration()) //use chart's transitionDuration so labels animate with rows
        .attr('x', function(d){ //set label final position
            var dataValue = chart.valueAccessor()(d); //use chart's value accessor as basis for row label position
            var scaledValue = chart.xAxis().scale()(dataValue); //convert numeric value to row width
            return scaledValue+padding; //return scaled value to set label position
        });
});
.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top