如何为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");

这里假设您对SVG使用了与NVD3示例中相同的ID等，如果不是这样，只需相应地调整选择器。

Answer 2

采取一种不同的方法，我希望更好地控制图表的布局和样式，因此在jQuery的帮助下，我在外部添加了标题，而不是将其作为文本元素添加到<svg>标记内。

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

chart-title也可用于设置svg标记内的文本元素的样式，但居中要比使用x的宽度设置SVG值容易得多，如下所示：

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

Answer 3

仅当您设置宽度时，上述解决方案才有效。在我的例子中，宽度被设置为auto，所以在它创建图表之前，它没有宽度可供参考。我实际上修改了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');