如何在 nvd3 条形图的所有条形上正确居中文本元素

Question

我想在每个单独的条形图上显示 nvd3 条形图的 y 轴值。我可以显示这些值，但我不知道如何在不对值进行硬编码的情况下将文本元素的高度设置为每个条的中心。我用

d3.selectAll(".nv-bar")

到 select 每个栏，但这没有高度属性（据我所知）。 "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>

Answer 1

有两件事使这项工作成功。

首先，在过渡结束之前您不能写标签，因为在那之前 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
        })
    });

例子here.

如何在 nvd3 条形图的所有条形上正确居中文本元素

How to correctly centre text element on all bars of a nvd3 bar chart

d3.js

nvd3.js