2

因此，我手上有以下 JSON 数据，我需要找到在 D3 中绘制圆环图的最佳方法。暂时忽略“信息”和“政治家”数组并严格关注“行业”数组，我想实现以下图表：

请原谅 2 分钟的 Photoshop...

请原谅 2 分钟的 Photoshop 工作......

本质上，每条小黑线都代表一个行业。每个行业都受到民主党、共和党和独立人士的美元影响。我想创建一个甜甜圈图（或两个甜甜圈图），以上述方式除以是和否。

我已经尝试编写了一些代码，但我仍在了解 D3，所以请多多包涵。该代码如下所示：

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

到目前为止，我只让屏幕呈现了一个蓝色的半圆形，但它被分成了三个路径，所以至少我知道我循环正确。我如何根据影响力细分（因为没有更好的词）这些部分？

您将在我的代码的第一部分注意到，我基本上采用了我已经获得的 JSON 并尝试将它的格式设置得更好一点，以便在 D3 中更容易。这是最佳实践吗？我觉得D3中可能有一些神奇的功能可以让我所有的烦恼都消失，但我不知道有一个。大多数情况下，我只是在寻求一些指导（但代码肯定会很好！），所以我会尽我所能。

此外，如果您愿意这样做，这里有一个小提琴可以玩。

4

1 回答 1

2

我想出了一种在 D3 中制作堆叠饼图的方法。我不完全确定这是否是“正确”的约定，但它确实运作良好。 这是一个要跟随的小提琴。

我已将我的yeas和nays数组重组为在对象中指定第一级的数据值（这样，D3 可以正确循环），然后还包括派对和姓名。这是yeas数组外观的示例：

是数组

本质上，有两个数组yeas和nays，每个数组都有 9 个具有值的对象：value、party和name。这样，我可以传递d3.layout.pie任一数组的数据并value在该饼图布局中给出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');

这确实是我见过的做堆叠饼图的唯一解决方案。话虽如此，我会将此标记为正确的，但如果有人想到更好的方法，我会很高兴知道。

于 2013-07-08T16:49:46.453 回答