AngSJを使用してNVD3ドーナツパイにjsonデータを挿入

Question

ここでは、リンクの中央のテキストに「行1」と「行2」が表示されています。しかし、これらの単語はコード内でハードコードされています。私は、APIを実行し、JSON応答を取得し、応答の一部をセンターテキストに動的に挿入したいと考えています。

どうすればThis shows a donut chart with center textを達成できますか？あなたはコードの下希望output.Useを達成するために、チャートの.tooltipContent()方法を使用することができます

nv.addGraph(function() { 
    var donutChart = nv.models 
    .pieChart() 
    .x(function(d) { 
     return d.label; 
    }) 
    .y(function(d) { 
     return d.value; 
    }) 
    .showLabels(true) 
    .showLegend(false) 
    .labelThreshold(0.05) 
    .labelType("key") 
    .color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"]) 
    .tooltipContent(function(key, y, e, graph) { 
     return "Custom tooltip string"; 
    }) // This is for when I turn on tooltips 
    .tooltips(false) 
    .donut(true) 
    .donutRatio(0.35); 

    // Insert text into the center of the donut 
    function centerText() { 
    return function() { 
     var svg = d3.select("svg"); 

     var donut = svg.selectAll("g.nv-slice").filter(function(d, i) { 
     return i == 0; 
     }); 

     // Insert first line of text into middle of donut pie chart 
     donut 
     .insert("text", "g") 
     .text("Line One") 
     .attr("class", "middle") 
     .attr("text-anchor", "middle") 
     .attr("dy", "-.55em") 
     .style("fill", "#000"); 
     // Insert second line of text into middle of donut pie chart 
     donut 
     .insert("text", "g") 
     .text("Line Two") 
     .attr("class", "middle") 
     .attr("text-anchor", "middle") 
     .attr("dy", ".85em") 
     .style("fill", "#000"); 
    }; 
    } 

    // Put the donut pie chart together 
    d3 
    .select("#donut-chart svg") 
    .datum(seedData()) 
    .transition() 
    .duration(300) 
    .call(donutChart) 
    .call(centerText()) 
    .call(pieSlice()); 

    return donutChart; 
    [enter image description here][2] 
}); 

// Seed data to populate donut pie chart 
function seedData() { 
    return [{ 
    label: "One", 
    value: 25 
    }, { 
    label: "Two", 
    value: 25 
    }, { 
    label: "Three", 
    value: 25 
    }, { 
    label: "Four", 
    value: 25 
    }, { 
    label: "Five", 
    value: 25 
    }]; 
} 

Answer 1

Workign demo!

。

.tooltipContent(
     function(key, y, e, graph) { 

      var svg = d3.select("svg");  
      var donut = svg.selectAll("g.nv-slice").filter(
      function (d, i) { 
      return i == 0; 
      }); //Get chart object 

      d3.select('.classed').remove();//(Label text remove)Remove the previously added text first 
      d3.select('.classed_val').remove();//(Value text remove)Remove the previously added text first 

      donut.insert("text", "g") 
      .text(e.label) 
      .attr("class", "middle")     
      .attr("text-anchor", "middle") 
      .attr("dy", "-.55em") 
      .style("fill", "#000") 
      .classed("classed", true); //Use this class at a time of removing 

      donut.insert("text", "g") 
      .text(e.value) 
      .attr("class", "middle")     
      .attr("text-anchor", "middle") 
      .attr("dy", ".85em") 
      .style("fill", e.color) 
      .classed("classed_val", true); //Use this class at a time of removing 

      return false } 
    ) 
     .tooltips(true) 

EDITはコメント1として、あなたはURLからデータを取得し、それを格納するためのjQuery $.get()を使用することができます。その後、そのデータを.tooltipContent()メソッドで使用することができます。 URLからデータを取得するためのコードの下 用途：

var data_from_file = []; 
    $.get("https://davids-restaurant.herokuapp.com/menu_items.json", function(data) {  
    data_from_file = data; // Store data in this variable and use it on hover 
    }); 

はホバーイベント内のデータを使用します。

donut.insert("text", "g") 
     //Here I have set first menu_item's name on hover 
     .text(data_from_file.menu_items[0].name) //Here I have used the variable "data_from_file" which contains data of the json url 
     .classed("classed_val", true) 
     .attr("text-anchor", "middle") 
     .attr("dy", ".85em") 
     .style("fill", e.color); 

Working demo!