我有一个地图变量,我需要用它在d3.js中绘制一个饼图

时间:2015-06-08 04:49:10

标签: javascript jquery d3.js charts

 var map = new object();

 var pie = d3.layout.pie().value(function(d) { return d ;} );

 var arcs =group.selectAll(".arc").data(pie(JSON.parse(map))) 
           .enter().append("g")
           .attr("class","arc");
 arcs.append("path")
 .attr("d",arc)
 .attr("fill" , function (d) { return color(d.map ); });

 arcs.append("text")
 .attr("transform", function(d){ return "translate(" +arc.centroid(d)+       
 ")";})
 .attr("text-anchor","middle")
 .attr("font-size","1.5em")
 .text(function(d){ return d.data; });

 arcs.append("text")
    .attr("dx", function(d){return -100;})
 .attr("dy", function(d){return 9;})
    .text(function(d){return totalmails+" mails in last 7days";})
.attr("font-size","1.5em")
.attr("fill","black");

我的地图变量包含以下数据..

 Object {URGENT: 10, NORMAL: 20, FYI: 30}...

我需要用它来绘制饼图。在这里,我尝试使用json解析来绘制饼图。所以请建议如何在使用json之前为json数据绘制饼图我试图仅使用数字数组绘制。现在我需要使用json进行绘制,这种形式为Object {URGENT: 10, NORMAL: 20, FYI: 30},需要绘制为钥匙紧急,正常,仅供参考

1 个答案:

答案 0 :(得分:0)

实际上我在代码中看不到任何JSON数据。 map变量只是一个对象。包含数据的JSON类似于以下字符串:

var map = '{"URGEND":10,"NORMAL":20,"FYI":10}';

如果可以选择更改您的JSON,那么饼图的更好布局将是:

var map = '[{"name":"URGEND","value":10},{"name":"NORMAL","value":20},{"name":"FYI","value":10}]';

这样您就可以使用layout.pie,其值函数为:

.value(function(d){return d.value;})

您可以使用.text()函数:

.text(function(d){ return d.name; })

如果您仍然不清楚某些事情,也许您应该发布更多代码,例如功能arccolor