Javascript 在条形图中的条形顶部显示值
我有一个x轴顺序刻度的条形图。我想在每个条的顶部或底部显示y值。当鼠标悬停在条形图上时，也可以显示y值。dc.js中有没有函数或方法可以实现这一点？这是图片，我的代码在图片下方> 编辑：这是我的代码： HTMLJavascript 在条形图中的条形顶部显示值,javascript,d3.js,bar-chart,dc.js,crossfilter,Javascript,D3.js,Bar Chart,Dc.js,Crossfilter,我有一个x轴顺序刻度的条形图。我想在每个条的顶部或底部显示y值。当鼠标悬停在条形图上时，也可以显示y值。dc.js中有没有函数或方法可以实现这一点？这是图片，我的代码在图片下方> 编辑：这是我的代码： HTML <body> <div id='Chart'> </div> </body> 下面是一个使用renderlet方法的黑客解决方案。jsFiddle： JS 检查更新 可供替代的 D3-ish方式 演示 .renderle
<body>
<div id='Chart'>
</div>
</body>
下面是一个使用
renderlet可供替代的 D3-ish方式 演示
.renderlet（函数（图表）{
//检查标签是否存在
var gLabels=图表。选择（“.labels”）；
if（gLabels.empty（））{
gLabels=chart.select（“.chart body”）.append（'g'）.classed（'labels'，true）；
}
var gLabelsData=gLabels.selectAll（“文本”）.data（chart.selectAll（“.bar”）[0]）；
gLabelsData.exit（）.remove（）；//删除未使用的元素
gLabelsData.enter（）.append（“text”）//添加新元素
格拉贝尔斯达
.attr（'text-anchor'，'middle'）
.attr（'填充'，'白色'）
.文本（功能（d）{
返回d3.select（d）.data（）[0].data.value
})
.attr（'x'，函数（d）{
return+d.getAttribute（'x'）+（d.getAttribute（'width'））/2；
})
.attr（'y'，函数（d）{return+d.getAttribute（'y'）+15；}）
.attr（'style'，function（d）{
如果（+d.getAttribute（'height'）<18）返回“display:none”；
});
})
.text(function(d){
return d3.select(d).data()[0].data.value
})
此函数将行图表的标签重新定位到每行的末尾。类似的技术也可用于使用“y”属性的条形图
- 使用图表的transitionDuration，标签随行矩形一起设置动画
- 使用图表的valueAccessor函数
- 使用图表的X轴比例计算标签位置
rowChart.on（'pretransition'，函数（图表）{
var=2；
chart.selectAll（'g.row>text'）//查找所有行标签
.attr（'x'，padding）//将标签移动到起始位置
.transition（）//开始转换
.duration（chart.transitionDuration（））//使用图表的transitionDuration，使标签以行为动画
.attr（'x'，函数（d）{//设置标签的最终位置
var dataValue=chart.valueAccessor（）（d）；//使用图表的值访问器作为行标签位置的基础
var scaledValue=chart.xAxis（）.scale（）（dataValue）；//将数值转换为行宽
返回缩放值+填充；//返回缩放值以设置标签位置
});
});。您只需使用.renderLabel（true）
。它将在顶部打印值您可以发布代码和/或a或类似内容吗？@mdml完成！如果您还需要什么，请告诉我。为/UniqueActivities获取FIREBASE警告：on（）或once（）失败：错误：权限\u被拒绝：客户端没有访问所需数据的权限。@elzi我创建了一个并简化了代码。太好了。但是，我希望在每个条的顶部显示数字，而不是条名。抱歉搞混了。事实上，我在renderlet上也得到了同样的结果，但我不知道如何在每个条的顶部显示数字（y值）。在这种情况下，这里有一个非常简单的解决方案，哈哈：hella hecky。我很恼火，这不是dc.js的默认功能。提交PR！不过，我认为你应该能够直接从吧台上获取数据。d3用数据注释每个dom元素@elzi，想编辑一下你的答案吗，至少标题是hack？谢谢。请注意，d3提供的d
参数。每个都提供数据，因此不需要标题破解。你的解决方案很有创意，但做的工作比需要的多。你太棒了。非常感谢。这太棒了。它还不是很地道的d3代码，因为通常您使用选择来执行循环，手动索引更少，但它已经越来越接近了。谢谢@Gordon我用dc 2.0更新了我的答案，用了一个更惯用的代码，.on（'pretransition'，function{…}）
比.renderlet（function{…}）
@dimirc更好-谢谢你这个惊人的答案。我已经很好地利用了这个方法，但我正在尝试将这个方法用于堆叠条形图。我在这里发布了一个问题：
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>');
});
}
body {
margin-top:20px;
}
#Chart {
position:relative;
}
#Chart .val {
position:absolute;
left:0;
bottom:0;
text-align: center;
}
.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');
}
})
.on("preRedraw", function(chart){
//Remove old values (if found)
chart.select('#inline-labels').remove();
})
.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";
});
})
.text(function(d){
return d3.select(d).data()[0].data.value
})
.text(function(d){
return chart.valueAccessor()(d3.select(d).data()[0].data)
});