nvd3.js - 使用 AngularJS 将 json 数据插入到 NVD3 Donut Pie

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()图表的方法来实现所需的输出。使用下面的代码。

.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() 中使用该数据方法。
使用以下代码从 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!