如何为 NVD3.js 图表添加标题 [英] How to add a title for a NVD3.js graph

问题描述

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

I want to add a title text over the graph in 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.我得到一个空白页..

Its (Highlighted) working for D3.js but not working for NVD3.js. I'm getting a Blank page..

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

I want to place the text over the Chart as like the following image (Which is created in Paint)

我怎样才能做到这一点?

How can I achieve this?

推荐答案

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

You can use D3 to select the container SVG and append the title:

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

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

This assumes that you're using the same ID etc for the SVG as in the NVD3 examples, if not, simply adjust the selector accordingly.

这篇关于如何为 NVD3.js 图表添加标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！