Диаграмма диаграммы пончика - добавить название - NVd3.js

Question

Я изучаю библиотеку NVD3.js. Меня поражает, как быстро в нем можно создавать вещи.

Но кажется, что иногда сложно изменить график. В этом случае Я хотел бы добавить заголовок к моей диаграмме.

Другая вещь, Я хотел бы добавить дополнительные данные в tool-tip. Таким образом, на hover, он также будет включать примечание в мои данные.

образец данных:

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

---

Update: Исходный код для всплывающей подсказки расположенный в пределах 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. Я не знаю, какая функция используется для указания заголовка.

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