Javascript 来自JSON的D3.JS分组圆环图
所以,我手头有一张图,我需要找到在D3中绘制甜甜圈图表的最佳方法。忽略“信息”和“政客”数组,现在严格关注“行业”数组,我想实现以下图表: 请原谅2分钟的Photoshop作业 基本上,每条小黑线代表一个行业。每个行业都有来自民主党、共和党和独立人士的影响力。我想按照上面的方式创建一个油炸圈饼图(或两个油炸圈饼图)除以是和否 我已经尝试编写了一些代码,但我仍然了解D3,所以请耐心听我说。该代码如下所示:Javascript 来自JSON的D3.JS分组圆环图,javascript,html,css,svg,d3.js,Javascript,Html,Css,Svg,D3.js,所以,我手头有一张图,我需要找到在D3中绘制甜甜圈图表的最佳方法。忽略“信息”和“政客”数组,现在严格关注“行业”数组,我想实现以下图表: 请原谅2分钟的Photoshop作业 基本上,每条小黑线代表一个行业。每个行业都有来自民主党、共和党和独立人士的影响力。我想按照上面的方式创建一个油炸圈饼图(或两个油炸圈饼图)除以是和否 我已经尝试编写了一些代码,但我仍然了解D3,所以请耐心听我说。该代码如下所示: d3.json('mock2.json', function(errors, data)
d3.json('mock2.json', function(errors, data) {
//Formatting of data
var yeas = [];
var nays = [];
for(var i = 0; i < data.industries.length; i++) {
var yea_temp = {};
var nay_temp = {};
var yea_c = data.industries[i].yea_contribution;
var nay_c = data.industries[i].nay_contribution;
yea_temp.name = data.industries[i].name;
yea_temp.influence = {"D": yea_c.d_influence, "R": yea_c.r_influence, "I": yea_c.i_influence};
nay_temp.name = data.industries[i].name;
nay_temp.influence = {"D": nay_c.d_influence, "R": nay_c.r_influence, "I": nay_c.i_influence};
yeas.push(yea_temp);
nays.push(nay_temp);
}
//Log the variables for console inspection
console.log(yeas);
console.log(nays);
//Declare variables
var width = 800,
height = 600,
radius = Math.min(width, height)/2;
var svg = d3.select('#graph').append('svg')
.attr('width', width)
.attr('height', height);
var group = svg.append('g')
.attr('transform', 'translate(300, 300)');
var arc = d3.svg.arc()
.innerRadius(200)
.outerRadius(radius);
var yea_pie = d3.layout.pie()
.value(function(d, i) {
if(i == 0)
return d.influence.D;
else if(i == 1)
return d.influence.I;
else
return d.influence.R;
})
.startAngle(-Math.PI/2)
.endAngle(Math.PI/2);
var color = d3.scale.ordinal()
.range(['rgba(92,188,239,0.5)', 'rgba(255,76,76,0.5)', 'rgba(150,163,170,0.5)']);
var yea_arcs = group.selectAll('.arc')
.data(yea_pie(yeas))
.enter()
.append('g')
.attr('class', 'arc')
.attr('class', function(d) { console.log(d); });
yea_arcs.append('path')
.attr('d', arc)
.attr('fill', function(d) { return color(d.data); });
d3.json('mock2.json',函数(错误,数据){
//数据格式
var yeas=[];
var-nays=[];
对于(var i=0;i
到目前为止,我的屏幕只呈现了一个蓝色的半圆,但它被分成三条路径,所以至少我知道我的循环是正确的。我如何根据影响来细分(没有更好的词)这些部分
在我的第一段代码中,你会注意到,我基本上采用了我得到的JSON,并尝试将其格式设置得更好一点,这样在D3中就更容易了。这是最佳实践吗?我觉得D3中可能有一些神奇的功能,可以消除我所有的担忧,但我没有意识到。我主要是在寻求一些指导(但代码肯定会很好!),所以我会尽我所能
还有,如果您愿意的话。我已经找到了一种在D3中制作堆叠饼图的方法。我不完全确定这是否是“正确”的约定,但它确实很有效。请遵循 我已将我的
yeas
和nays
数组重新构造为在对象的第一级指定数据值(这样,D3可以正确循环),然后还包括party和name。下面是yeas
数组的外观示例:
基本上有两个数组,yeas
和nays
,每个数组都有9个值为的对象:value
,party
,和name
。这样我就可以传递d3.layout.pie
任一数组的数据,并在饼图布局d.value
中给出值下面是要解释的代码片段:
var yea_pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; }) //This computes a pie value for each yeas.value (d.value)
.startAngle(-Math.PI/2)
.endAngle(Math.PI/2);
var yeas_industry = yea_group.selectAll('.arc')
.data(yea_pie(yeas)) //Pass the yeas variable to yea_pie
.enter().append('g')
.attr('class', 'arc');
这真的是我见过的唯一一个制作叠层饼图的解决方案。尽管如此,我会把它标记为正确的,但是如果其他人想到更好的方法,我会很有兴趣知道