7

我想在 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 中创建）

在此处输入图像描述

我怎样才能做到这一点？

4

3 回答 3

13

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

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

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

于 2013-05-09T10:31:07.313 回答
2

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

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');
于 2013-10-09T00:54:09.853 回答
1

上述解决方案仅在您设置宽度时才有效。在我的情况下，宽度设置为自动，因此在创建图表之前它没有参考宽度。我实际上修改了 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');
于 2017-04-04T17:04:26.243 回答