我想在每个单独的条形上显示 nvd3 条形图的 y 轴值。我可以显示这些值，但我不知道如何将文本元素的高度设置为每个条的中心而不对值进行硬编码。我用
d3.selectAll(".nv-bar")
选择每个栏，但这没有高度属性（据我所知）。 “discreteBar”有高度，但我无法进入 d3.select()
我很感激任何帮助
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.css">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div id="chartContainer" >
<script type="text/javascript">
var data = [
{ "Class":"One", "Value":500000 },
{ "Class":"Two", "Value":200000},
{ "Class":"Three", "Value":37000},
{ "Class":"Four", "Value":35000},
];
var nested_data = d3.nest()
.key(function (d) {undefined; })
.entries(data);
nv.addGraph(function() {
var width = 600, height = 600
var chart = nv.models.discreteBarChart()
.x(function (d) { return d.Class})
.y(function (d) { return d.Value})
.margin({ top: 30, right: 20, bottom: 50, left: 175 })
.tooltips(false)
.showValues(false)
.width(width)
.height(height)
.color(["#deebf7"])
.tooltipContent(function (key, x, y) {
return '<h3>' + x + '</h3>' +
'<p>'+ '£' + y + '</p>'
})
chart.yAxis
.tickFormat(d3.format(',.0f'));
d3.select('#chartContainer')
.append("svg")
.datum(nested_data)
.transition().duration(1000)
.call(chart);
d3.selectAll(".nv-bar")
.append("text")
.attr("x", chart.xAxis.rangeBand()/4)
.attr("y", 40)
.text(function (d) {
return d.Value
})
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</div>
</body>
</html>
有两件事使这项工作得以实现。
首先，在转换结束之前您无法写入标签，因为rects在那之前不会有适当的高度。
其次，您可以使用以下方法获取矩形高度previousSibling您刚刚添加的文本。将其放在一起：
d3.select('#chartContainer')
.append("svg")
.attr('width', width)
.attr('height', height)
.datum(nested_data)
.transition().duration(1000)
.call(chart)
.each("end", function() {
d3.selectAll(".nv-bar")
.append("text")
.attr("x", chart.xAxis.rangeBand() / 4)
.attr("y", function(d) {
return d3.select(this.previousSibling).attr('height') / 2;
})
.text(function(d) {
return d.Value
})
});
Example here http://plnkr.co/edit/Vao08uONtDFjuMWkyWDc?p=preview.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
