如何为NVD3.js图添加标题

Question

我想在NVD3.js中的图表上添加标题文字。

我尝试了以下内容，

nv.addGraph(function() {
var chart = nv.models.linePlusBarWithFocusChart()
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .x(function(d,i) { return i })
    .color(d3.scale.category10().range());

chart.append("text")
    .attr("x", 200)             
    .attr("y", 100)
    .attr("text-anchor", "middle")  
    .text("Sample Charts");
}

它（突出显示）为D3.js工作但不适用于NVD3.js.我得到一个空白页面..

我想将文本放在图表上，如下图所示（在Paint中创建）

我怎样才能做到这一点？

Answer 1

您可以使用D3选择容器SVG并附加标题：

d3.select('#chart svg')
  .append("text")
  .attr("x", 200)             
  .attr("y", 100)
  .attr("text-anchor", "middle")  
  .text("Sample Charts");

这假设您使用与NVD3示例中相同的ID等ID，如果没有，只需相应地调整选择器。

Answer 2

采用不同的方法，我希望能够更好地控制图表的布局和样式，而不是将其作为文本元素添加到<svg>标记中，而是在jQuery的帮助下将标题添加到外部。 / p>

var $svg = $('#chart svg');
$svg.parent().append('<div class="chart-title">Sample Charts</div>');

chart-title也可以用来设置svg标签内的文本元素的样式，但是居中比使用svg的宽度设置x值更容易这样：

svg.append('text')
    .attr('x', width / 2)
    .attr('y', 20)
    .attr('text-anchor', 'middle')
    .attr('class', 'chart-title')
    .text('Sample Charts');

Answer 3

上述解决方案仅在您设置宽度时有效。在我的情况下，宽度设置为自动，所以直到它创建图表它没有宽度参考。我实际上修改了nvd3代码，因为我认为有些图表有标题而有些没有标题是愚蠢的。我在每个图表中修改了3个地方。在保证金部分我添加了

var margin = {top: 30, right: 30, bottom: 30, left: 60}
    , marginTop = null
    .
    .
    .
    , title = false
    ;

在图表功能中我添加了

function chart(selection) {
    .
    .
    .
    if(title) { 
        g.append("text")
            .attr("x", (availableWidth - margin.left)/ 2)             
            .attr("y", -4)
            .attr("text-anchor", "middle")  
            .text(title);
    }

在图表选项中，我添加了

chart._options = Object.create({}, {
        // simple options, just get/set the necessary values
        width:      {get: function(){return width;}, set: function(_){width=_;}},
        .
        .
        .
        title:      {get: function(){return title;}, set: function(_){title=_;}},

然后在你的控制器或任何地方使用

chart.title('Your chart Title');