Question

在链接中，中心文本显示“Line One”和“Line Two”。但是这些单词在代码中是硬编码的。我想运行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!

使用AngularJS将json数据插入NVD3 Donut Pie

1 个答案: