D3.js 如何在nvd3条形图的所有条形图上正确居中文本元素_D3.js_Nvd3.js

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

d3.js

D3.js 如何在nvd3条形图的所有条形图上正确居中文本元素,d3.js,nvd3.js,D3.js,Nvd3.js,我想在每个条形图上显示nvd3条形图的y轴值。我可以显示这些值，但我不知道如何在不硬编码值的情况下将文本元素的高度设置为每个条的中心。我用 d3.selectAll(".nv-bar") 选择每个条，但这没有高度属性（据我所知）。“discreteBar”有高度，但我无法进入d3.select（）谢谢你的帮助 <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src=

我想在每个条形图上显示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>


风险值数据=[
{“类”：“一”，“值”：500000}，
{“类”：“二”，“值”：200000}，
{“类”：“三”，“值”：37000}，
{“类”：“四”，“值”：35000}，
];
var nested_data=d3.nest（）
.key（函数（d）{未定义；}）
.条目（数据）；
nv.addGraph（函数（）{
变量宽度=600，高度=600
var chart=nv.models.discreteBarChart（）
.x（函数（d）{返回d.Class}）
.y（函数（d）{返回d.Value}）
.margin（{顶部：30，右侧：20，底部：50，左侧：175}）
.工具提示（错误）
.showValues（假）
.宽度（宽度）
.高度（高度）
.颜色（[“#deebf7”]）
.ToolTicContent（函数（键，x，y）{
返回“+x+”+
“”+”£“+y+””
})
图1.yAxis
.tickFormat（d3.format（'，.0f'））；
d3.选择（“#图表容器”）
.append（“svg”）
.基准（嵌套的_数据）
.transition（）.持续时间（1000）
.电话（图表）；
d3.全选（“.nv条”）
.append（“文本”）
.attr（“x”，chart.xAxis.rangeBand（）/4）
.attr（“y”，40）
.文本（功能（d）{
返回d值
})
nv.utils.windowResize（图表更新）；
收益表；
});

有两件事使这项工作成功

首先，在转换结束之前不能写入标签，因为在转换结束之前，

rect

将没有适当的高度

其次，您可以使用刚才添加的文本的

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
        })
    });

示例。

在普通D3中执行此操作可能比使用NVD3更容易，请参见。@Larskothoff我同意你的观点，但出于我的目的，我需要使用NVD3，这非常有效，谢谢