javascript - 未捕获的类型错误 : Cannot read property 'startAngle'

Question

我正在尝试根据通过 API 获取的数据制作圆环图。我将来自 API 的数据存储在一个 json 变量中，但除此之外我的代码是标准的。

我知道由于 D3.js 版本更改出现了一些类型错误，但我什至没有在代码中写入任何与 startAngle 相关的内容，但我收到错误 Uncaught TypeError: Cannot read property 'startAngle' of undefined。

有这个问题的代码在 codepen 上:http://codepen.io/kvyb/pen/GrYzEB/

引用代码如下:

var a = ["https://api.cryptonator.com/api/ticker/btc-usd", "https://api.cryptonator.com/api/ticker/ltc-usd", "https://api.cryptonator.com/api/ticker/eth-usd", "https://api.cryptonator.com/api/ticker/etc-usd","https://api.cryptonator.com/api/ticker/xmr-usd","https://api.cryptonator.com/api/ticker/icn-usd","https://api.cryptonator.com/api/ticker/dash-usd","https://api.cryptonator.com/api/ticker/MAID-usd","https://api.cryptonator.com/api/ticker/omni-usd","https://api.cryptonator.com/api/ticker/rep-usd"];

function fetch() {
  all_data = ["{\"floor\": ["];
  for (index = 0; index < a.length; ++index) { 
    $.ajax({
      url : a[index],
      dataType : "json",
      async : false,
      error : function(data){
        console.log("--");   
      },
      success : function(data) {
       all_data += JSON.stringify(data["ticker"]) + ',';
      }
    })
  }
};

fetch() 
all_data += "]}";
var pos = all_data.lastIndexOf(',');
all_data = all_data.substring(0,pos) + "" + all_data.substring(pos+1);
console.log(all_data)

// CHART

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.population; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

data = JSON.parse( all_data );

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.base); });

  g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.base; });

function type(d) {
  d.price = +d.price;
  return d;
}

Answer 1

startAngle、endAgle、padAngle、index、value和 data 是由饼图生成器创建的属性。由于您没有正确地将数据传递给饼图生成器，因此您会收到该错误(此处的undefined 指的是您的数据)。

您有两个问题需要解决。首先，您的data 变量是一个对象，您必须将一个数组 传递给data()。要传递数组，而不是:

.data(pie(data))

应该是:

.data(pie(data.floor))

其次，您在该数组的对象中没有名为 population 的属性。因此，将饼图生成器更改为数据中的属性，如 volume:

var pie = d3.pie()
    .sort(null)
    .value(function(d) {
        return +d.volume;
    });

这是您的代码笔:http://codepen.io/anon/pen/EZGyrL?editors=0010