Question

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

据我所知，由于D3.js版本更改，有一些TypeErrors，但我甚至没有在代码中编写startAngle的任何内容，但是我收到错误Uncaught TypeError：无法读取属性＆＃39; startAngle＆＃39 ;未定义的。

此问题的代码位于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;
    });

以下是您的Codepen：http://codepen.io/anon/pen/EZGyrL?editors=0010

未捕获的TypeError：无法读取属性＆＃39; startAngle＆＃39;

1 个答案: