未捕获的TypeError：无法读取属性'startAngle'(Uncaught TypeError: Cannot read property 'startAngle

未捕获的TypeError：无法读取属性'startAngle'(Uncaught TypeError: Cannot read property 'startAngle')

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

我知道由于D3.js版本更改已经有一些TypeErrors，但我甚至没有在代码中编写startAngle的任何内容，但我得到错误Uncaught TypeError：无法读取未定义的属性'startAngle'。

这个问题的代码在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; }

I am trying to make a donut chart from data which is fetched via an API. I store the data from the API in a json variable, but otherwise my code is standard.

I understand there have been some TypeErrors due to D3.js version change, but I do not even have anything with startAngle written in the code, yet I get the error Uncaught TypeError: Cannot read property 'startAngle' of undefined.

The code with this problem is on codepen : http://codepen.io/kvyb/pen/GrYzEB/

Here is the code for reference:

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; }

最满意答案

startAngle与endAgle ， padAngle ， index ， value和data是由pie生成器创建的属性。 由于您没有正确地将数据传递给饼图生成器，因此您将收到该错误（此处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？edit = 0010

The startAngle, together with endAgle, padAngle, index, value and data, are properties created by the pie generator. As you're not correctly passing your data to the pie generator, you're getting that error (undefined here refers to your data).

You have two problems to fix. First, your data variable is an object, and you have to pass an array to data(). To pass the array, instead of:

.data(pie(data))

It should be:

.data(pie(data.floor))

Second, you don't have a property named population in the objects of that array. So, change the pie generator to a property that you have in your data, as volume:

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

Here is your Codepen: http://codepen.io/anon/pen/EZGyrL?editors=0010