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

我正在探索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>'
  }

---

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

我认为您正在查找图表。（）JSFiddle:

var tp=函数（键、y、e、图形）{
控制台日志（键，e，y）；
返回“”+键+“”+
“！！”+y+”！！
”+
“喜欢：”+e.point.Likes+“
”；
};
图表工具内容（tp）；

非常好。这就解决了！但是

e.point.likes

的

point

部分做什么呢？当您在您的数据集中像我们这样有更多信息（即除了y值）时：data=[{key:“Loans”，y:52.24注：“Expect maxist value”}，key:“Accounts”，y:300.24注：“Meh”}，]数据数组中的每个项都作为e.points传递给工具提示回调，您可以从该对象获取与该点关联的其余数据。这很有意义。你是否有一个文档的链接，其中解释了这一点？（如果你不知道的话，可以）。总的来说，我还没有找到一个很好的文档来源。你对这个标题有什么建议/想法吗？我在其他图表标题中使用的标准D3.js代码对NVD3不起作用。这个库中的文档有点薄，我通过阅读源代码发现了它。你为这个头衔做了什么？

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");

      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);