如何引用API並將其用作D3中的數據

Question

我想使用拉取JSON的API製作條形圖，但不知道如何去引用數據。

數據的第一個點是應該是類別的名稱，第二個點是該條用來確定其高度的實際數據值。例如：

拉爾夫·92 吉姆·34 米歇爾55

var Champs; 
function callback(response) { 
Champs = response; 
console.log(Champs); 
} 

var url = 
"https://ddragon.leagueoflegends.com/cdn/4.7.16/data/en_US/champion.json"; 

d3.json(url, function(data) { 
callback(data); 

Object.keys(Champs.data).forEach(function(key, index) { 
    var champsObj = key; 
    var champName = Champs.data[champsObj].name; 
    var champHP = Champs.data[champsObj].stats.hp; 
}) 

    var scale = d3.scaleLinear() 
     .domain([0, d3.max(data.data, function(d){ return d.data.stats.hp})]) 
     .range([0, 500]); 

    var canvas = d3.select('body').append('svg') 
     .attr('width', 500) 
     .attr('height', 500) 


    canvas.selectAll('rect') 
    .data(data.data) 
    .enter() 
     .append('rect') 
     .attr('width', function(d){return scale(d.data.stats.hp)}) 
     .attr('height', 6) 
     .attr('y', function(d, i){return i*7}) 
     .attr('fill', 'blue') 

}); 

我通過文件，以及你的答案一個d3wiki搜查，發現從類似的問題有點幫助在這裏，但我m仍然很努力如何引用json中的數據

Answer 1

data.data這裏不是一個數組，而是一個對象，調用Object.values(data.data)來獲取數組的值。

function callback(response) { 
    Champs = response; 
    console.log(Champs); 
} 

var url = 
"https://ddragon.leagueoflegends.com/cdn/4.7.16/data/en_US/champion.json"; 

d3.json(url, function(data) { 
callback(data); 

    var scale = d3.scaleLinear() 
     .domain([0, d3.max(Object.values(data.data), function(d){ return d.stats.hp})]) 
     .range([0, 500]); 

    var canvas = d3.select('body').append('svg') 
     .attr('width', 500) 
     .attr('height', 500) 


    canvas.selectAll('rect') 
    .data(Object.values(data.data)) 
    .enter() 
     .append('rect') 
     .attr('width', function(d){return scale(d.stats.hp)}) 
     .attr('height', 6) 
     .attr('y', function(d, i){return i*7}) 
     .attr('fill', 'blue') 

}); 

Answer 2

問題可能是您將data.data傳遞給了.data屬性，並且稍後，您的寬度和y設置器會在d中引用，您引用的位置d.data。

這可能是d.data.data，它可能是未定義的。我會在'width'函數中放置一個斷點或調試器，以查看傳入的內容爲d。