使用AngularJS插入json數據itnto NVD3甜甜圈派

Question

在鏈接中，中心文本顯示「第一行」和「第二行」。但是，這些單詞在代碼中是硬編碼的。我想運行一個API，獲取JSON響應並在中心文本中動態插入一部分響應。

我該如何達到This shows a donut chart with center text這個？

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()方法來實現下面的代碼所需的output.Use。

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

編輯

按照註釋，你可以使用jQuery $.get()從URL獲取數據和存儲。然後你可以在.tooltipContent()方法中使用該數據。

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!