試圖從JSON數據繪製一個D3餅圖

Question

我想從下面的JSON數據生成一個D3餅圖。

{"data":[ {"Success":3412, "Pending":2107} ]} 該數據從sql表中檢索。成功和待定是sql表格中的列標題。以下是我正在嘗試用於生成餅圖的代碼。

var width = 360; 
var height = 360; 
var outradius = Math.min(width, height)/2; 
var inradius = outradius/1.25; 

var color = d3.scale.category20b(); 

var svg = d3.select('#Chart') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .append('g') 
    .attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')'); 
var arc = d3.svg.arc() 
    .outerRadius(outradius) 
    .innerRadius(inradius); 
var pie = d3.layout.pie() 
    .value(function (d, i) { return d.data.Success; }) 
    .sort(null); 
var path = svg.selectAll('path') 
    .data(pie(dataset.data)) 
    .enter() 
    .append('path') 
    .attr('d', arc) 
    .attr('fill', function (d, i) { 
     return color(d.data.Pending); 
    }); 

我已經爲繪製某個列的值的表創建了d3餅圖。但是在這裏，我需要將兩列中的值繪製在一個餅圖中，以便彼此進行比較。

上述代碼將比較所有「成功」鍵的值，並根據「待定」鍵填寫不同的顏色。但我在json中只有一個Success和Pending Key：值對，我需要在餅圖中比較它們。

有沒有辦法做到這一點？

我讀到這個線程：Data structure for D3 pie charts

但我不知道如何將數據傳遞到餡餅。你能編輯我的代碼片段並顯示我嗎？即使我以前在java中工作過，但我對網絡編程還是很陌生的。

親切的問候

Answer 1

如果我理解正確的話，你需要改變你的數據，你只需要在你的數據集一個元素與success和pending。爲了比較兩種需要兩組數據，像這樣：

var dataset = { 
    "data": [{ 
    "Name": "Success", 
    "Value": 3412 
    }, { 
    "Name": "Pending", 
    "Value": 2107 
    }] 
} 

通知我已經重新格式化代碼，所以你必須Name和Value。這樣您就可以使用弧的大小和名稱作爲顏色/文本的值。

改變你的數據使用此功能：

var data = { 
    "data": [{ 
    "Success": 3412, 
    "Pending": 2107 
    }] 
} 

var newData = []; 
for (var key in data.data[0]) { 
    console.log(key) 
    var thisData = { 
    "Name": key, 
    "Value": data.data[0][key] 
    } 
    newData.push(thisData) 
} 

console.log(newData) 

此經過您的數據，並創建一個由D3.pie :)

更新的代碼讀取新的數據：

var data = { 
 
    "data": [{ 
 
    "Success": 3412, 
 
    "Pending": 2107 
 
    }] 
 
} 
 

 
var newData = []; 
 
for (var key in data.data[0]) { 
 
// console.log(key) 
 
    var thisData = { 
 
    "Name": key, 
 
    "Value": data.data[0][key] 
 
    } 
 
    newData.push(thisData) 
 
} 
 

 

 
var width = 360; 
 
var height = 360; 
 
var outradius = Math.min(width, height)/2; 
 
var inradius = outradius/1.25; 
 

 
var color = d3.scale.category10(); 
 

 
var svg = d3.select('#Chart') 
 
    .append('svg') 
 
    .attr('width', width) 
 
    .attr('height', height) 
 
    .append('g') 
 
    .attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')'); 
 
var arc = d3.svg.arc() 
 
    .outerRadius(outradius) 
 
    .innerRadius(inradius); 
 
var pie = d3.layout.pie() 
 
    .value(function(d, i) { 
 
    console.log(d) 
 
    return d.Value; 
 
    }) 
 
    .sort(null); 
 
var path = svg.selectAll('path') 
 
    .data(pie(newData)) 
 
    .enter() 
 
    .append('path') 
 
    .attr('d', arc) 
 
    .attr('fill', function(d, i) { 
 
    return color(d.data.Name); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id='Chart'> 
 

 
</div>