如何引用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中搜索了答案，并从这里的类似问题中找到了一些帮助，但是我仍然在如何引用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')

});