2

次の JSON データが手元にあるので、D3 でドーナツ グラフをグラフ化する最適な方法を見つける必要があります。「info」と「politicians」の配列を無視して、今のところ「industries」の配列に厳密に焦点を当てて、次のチャートを実現したいと思います。

2分間のPhotoshopを許してください...

2分間のPhotoshopの仕事を許してください...

基本的に、それぞれの小さな黒い線は業界を表しています。各業界は、民主党、共和党、無党派の影響力を金額で持っています。上記の方法で賛成と反対で割ったドーナツ チャート (または 2 つのドーナツ チャート) を作成したいと思います。

私はすでにこれを少しコーディングしようとしましたが、まだ 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); });

これまでのところ、青い半円をレンダリングする画面しか表示されていませんが、3 つのパスに分割されているため、少なくともループが正しく行われていることがわかります。影響に応じてこれらのセクションをどのように細分化できますか (適切な言葉がないため)。

私のコードの最初の部分で、私は基本的に、与えられた JSON を取得し、D3 でより簡単になるように、もう少し適切にフォーマットしようとしていることに注意してください。これはベストプラクティスですか？D3 には私の心配をすべて解消してくれる魔法のような機能があるのではないかと思いますが、私はそれを認識していません。ほとんどの場合、私はちょっとしたガイダンスを求めているだけです (ただし、コードは確かに優れています!)。

また、それをやりたい場合は、ここで遊ぶためのフィドルがあります。

4

1 に答える 1