Question

我正在使用最新版本的NVD3，以及来自NVD3 Github的D3的推荐版本。我注意到discreetBar，multiBar和pieCharts，如果不是其他人，则No Data标签并非完全居中。他们被推到右边一点点。

我已经在代码中玩了一下，但仍然没有找到可行的解决方案。

控制multiBarChart.js

中的定位的代码

if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
    var noDataText = container.selectAll('.nv-noData').data([noData]);

    noDataText.enter().append('text')
      .attr('class', 'nvd3 nv-noData')
      .attr('dy', '-.7em')
      .style('text-anchor', 'middle');

    noDataText
      .attr('x', margin.left + availableWidth / 2)
      .attr('y', margin.top + availableHeight / 2)
      .text(function(d) { return d });

    return chart;
} else {
    container.selectAll('.nv-noData').remove();
}

更新似乎适用于我正在使用的所有图表的解决方法是匹配rmargin right。默认情况下，某些图表的left和bottom填充为100。添加right: 100会留下noData消息（更接近）死点。

Answer 1

我已将1519-1542行更改为

nv.utils.noData = function(chart, container) {
var opt = chart.options(),
    margin = opt.margin(),
    noData = opt.noData(),
    data = (noData == null) ? ["No Data Available."] : [noData],
    height = nv.utils.availableHeight(opt.height(), container, margin),
    width = nv.utils.availableWidth(opt.width(), container, margin),
    x = margin.left + width/2,
    y = margin.top + height/2;

//Remove any previously created chart components
container.selectAll('g').remove();

var noDataText = container.selectAll('.nv-noData').data(data);

noDataText.enter().append('text')
    .attr('class', 'nvd3 nv-noData')
    .style('text-anchor', 'middle');

noDataText
    .attr('x', '50%')
    .attr('y', '50%')
    .text(function(t){ return t; });

结合以下CSS：

.nvd3.nv-noData {
position: relative;
transform: translate(-50%, -50%) !important;
font-size: 24px;
color: #666;
font-weight: 200;
text-align: center;}

我目前所有的图表（条形图，饼图，多边形，旭日形图和区域图）都有完美的中心无数据文本

Answer 2

最简单的方法是在全局样式文件中添加一个css规则（不需要编辑js库），与phkdev规则非常相似，但最重要的是：

:host >>> .nv-noData {
  position: relative;
  transform: translate(-50%, -50%) !important;
  text-align: center;
}

编辑：确保图表选项中包含noData参数

NVD3图表“无数据”消息未居中

2 个答案: