Question

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

d3.selectAll(".nv-bar")

选择每个栏，但这没有高度属性（据我所见）。＆＃34; discreteBar＆＃34;有一个高度，但我无法进入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条形图的所有条上正确居中文本元素

1 个答案: