甜甜圈饼图 - 添加标题 - NVd3.js

Question

我正在探索NVD3.js库。它让我感到惊讶的是，它能够快速生产各种图表。

但有时候似乎很难修改图表。在这种情况下，我想给我的图表添加一个标题。

另外，我想在工具提示中添加额外的数据。因此，在悬停时，它也会包括我的数据注释。

数据样例：

var data = [
{
  key: "Loans",
  y: 52.24
  note: "Expect greatest value"
}];

这是我正在使用的代码：

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key; })
    .values(function(d) { return d; })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true);

chart.pie
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2; })
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 ;});


  d3.select("#chart")
      //.datum(historicalBarChart)
      .datum([data])
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

return chart;
});

---

更新：提示框的原始代码位于src->models->pieChart.js中：

tooltip = function(key, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p> Confidence: ' +  y + '%</p>'
  }

我曾尝试使用自己的函数来覆盖此功能。但是，要么出现错误，要么没有任何变化。 标题更新: 我通常使用以下代码（或类似代码）来设置标题。

svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Awesome Title");

但是，在NVD3中这是无效的。我不知道用什么函数来指定标题。

- EnigmaRM

Answer 1

我认为您正在寻找图表。 tooltipContent() JSFiddle：http://jsbin.com/idosop/7/edit

      var tp = function(key, y, e, graph) {
            console.log(key, e, y);
            return '<h3>' + key + '</h3>' +
                   '<p>!!' +  y + '!!</p>' +
              '<p>Likes: ' +  e.point.likes + '</p>';
      };
      chart.tooltipContent(tp);

- WolfgangCodes

---

非常好。问题解决了！但是 e.point.likes 中的 point 部分是什么意思？ - EnigmaRM

有道理。你有文档的链接吗，可以解释一下吗？（如果没有也没关系）。总体而言，我还没有找到一个很好的文档来源。 - EnigmaRM

你对标题该怎么做有什么建议或想法吗？我在其他图表标题中使用的标准D3.js代码在NVD3中不起作用。 - EnigmaRM

这个库的文档有点薄，我是通过阅读源代码找到它的。你尝试过为标题做什么吗？ - WolfgangCodes

哈哈。这是一个非常简单而伟大的解决方案，适用于标题。它可能不适用于所有未来的图表，但现在它确实有效。谢谢。 - EnigmaRM