如何为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,如果没有,只需相应地调整选择器.