D3.JS Сгруппированная диаграмма пончика от JSON

Question

Итак, у меня есть the following JSON data на руках, и мне нужно найти лучший способ для графика диаграммы пончиков в D3. Не обращая внимания на «информацию» и «политику» массивы и строго Ориентируясь на «отраслях» массиве в настоящее время, я хочу достичь следующей таблицы:

помилование 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 есть какая-то волшебная функция, которая заставляет все мои заботы уйти, но я не знаю об этом. В основном я просто ищу небольшое руководство (но код, конечно, будет приятным!), Поэтому я возьму то, что могу.

Также, here's a fiddle to play with, если вы предпочтете это сделать.

Answer 1

Я разработал способ сделать сложены круговые диаграммы в D3. Я не совсем уверен, что это «правильное» соглашение, но оно, безусловно, работает хорошо. Here's a fiddle, чтобы следовать вместе с.

Я отреставрировал свои массивы 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'); 

Это действительно единственное решение, которое я когда-либо видел, чтобы делать многослойную круговую диаграмму. С учетом сказанного я буду отмечать это правильно, но если кто-то еще подумает о лучшем способе, мне было бы интересно узнать.