[英]D3 Pie Chart json Structure issue?
I wanted to create a simple pie chart from a json feed however after following a few examples I am at a point where firebug is not giving me any errors,yet there is not pie chart showing up. 我想从json提要创建一个简单的饼图,但是在遵循了一些示例之后,我发现Firebug并没有给我任何错误,但是还没有饼图出现。 Im not sure if it has something to do with my json structure?
我不确定它是否与我的json结构有关? I was getting a error like this for a while :
我有一段时间出现这样的错误:
Object #<Object> has no method 'map'
Below is my code: 下面是我的代码:
<script>
function init(){
var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.ordinal()
.range(["#98abc5","#8a89a6","#7b6888","#6b486b","#a05d56","#d0743c"]);
var sql = new cartodb.SQL({ user: 'ceigis' });
sql.execute("SELECT status, COUNT(status) FROM deldot_rail_crossing GROUP BY status")
.done(function(data) {
for (var i = 0; i < data.total_rows; i++) {
var filterdata = data.rows[i];
}
var chart = d3.select("body").selectAll("svg")
.data(filterdata)
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")")
var arc = d3.svg.arc()
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) { return d.count; });
var arcs = chart.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return filterdata.rows[i].status; });
})
.error(function(errors) {
// do nothing
})
}
</script>
</head>
<body onload="init()">
</body>
</html>
And below is what my json query is returning: 下面是我的json查询返回的内容:
{"time":0.005,"fields":{"status":{"type":"string"},"count":{"type":"number"}},
"total_rows":4,"rows":[{"status":"private","count":169},{"status":"comp","count":41},
{"status":"not_comp","count":276},{"status":"pre_qaqc","count":10}]}
Any help would be appreciated 任何帮助,将不胜感激
Your variable filterdata
is an object, you should pass an array to the data
method. 您的变量
filterdata
是一个对象,您应该将数组传递给data
方法。 If you use .selectAll("svg").data([filterdata])
, you need to append the element on enter
: 如果使用
.selectAll("svg").data([filterdata])
,则需要在enter
.selectAll("svg").data([filterdata])
附加元素:
var chart = d3.select("body").selectAll("svg")
.data([filterdata])
.enter()
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")");
D3 expects that the argumetn of data
to be an array. D3希望
data
的整数是一个数组。 The filterdata
object don't have a map
method, and thus the error. filterdata
对象没有map
方法,因此会出现错误。 You can also bind a single object to a selection, but you need to append it first: 您还可以将单个对象绑定到选区,但需要先附加它:
var chart = d3.select("body").append("svg")
.datum(filterdata)
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + r + "," + r + ")");
Regards, 问候,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.