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')

});

如何引用API并将其用作D3

1 个答案: