javascript - ドーナツ円グラフ - タイトルを追加 - NVd3.js

Question

NVD3.js ライブラリを調べています。ものづくりのスピードに驚かされます。

しかし、チャートを変更するのは難しいようです。この場合、チャートにタイトルを追加したいと思います。

もう 1 つは、 tool-tip にデータを追加したいということです。そのため、ホバーすると、データにメモも含まれます。

データサンプル:

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 では有効ではありません。タイトルを指定するためにどの関数が使用されているかわかりません。