Question

我很难找到一种方法来调用json URL中的数据，因为它的嵌套方式如下所示。

[
{"data":
  "Aatrox":
    "id": "Aatrox"
    "hp": "500"
   "Ashe":
     "id": "Ashe"
     "hp": "350"
}]

我正在尝试使用＆＃39; hp＆＃39;使用d3.js将值作为条形图的高度数据点，并使用＆＃39; id＆＃39;值作为每个条形下的标签，但我不确定如何调用数据并将其存储在我可以在d3代码中使用的变量中。

d3.json("https://ddragon.leagueoflegends.com/cdn/4.7.16/data/em_us/champion.json
", function(data) {
console.log(data);
});

目前我只是在控制台中记录数据，因为我不确定如何在变量中存储我想要的特定部分。

How to retrieve the key values of a nested data set in D3

这个问题对我有点帮助，但我还不完全确定如何继续。

我遇到的主要问题是JSON的文件结构有点奇怪，我不确定＆＃39; x＆＃39;将是我想要拉动'hp＆＃39;在：

数据＆＃39; X＆＃39; .stats.hp

Answer 1

在D3中，data()函数接受三件事：

数组
功能
没有

现在，您的JSON只包含一堆嵌套对象：

{
    "data": {
        "Aatrox": {...
        },
        "Ahri": {...
        }
    }
}

因此，第一步是将其转换为对象数组，我们可以使用它来绑定数据。有几种方法可以做到这一点，这对初学者来说很容易：

var data = [];
var obj = json.data;
for (var key in obj) {
    data.push(obj[key])
}

现在我们有一个对象数组（名为data），就像这样......

[{
    id: "Aatrox"
}, {
    id: "Ahri"
}]

...我们可以获得hp属性：

.attr('width', function(d) {
    return scale(d.stats.hp)
})

以下是使用您的代码并仅更改数据数组的工作演示：

＆＃13;

  var canvas = d3.select('body').append('svg')
    .attr('width', 500)
    .attr('height', 500)

  d3.json("https://ddragon.leagueoflegends.com/cdn/4.7.16/data/en_US/champion.json", function(json) {
    var data = [];
    var obj = json.data;
    for (var key in obj) {
      data.push(obj[key])
    }

    var scale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) {
        return d.stats.hp
      })])
      .range([0, 500]);

    canvas.selectAll('rect')
      .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')
  });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

Answer 2

你可以这样使用。

true

如何使用D3 / JS检索JSON文件中的嵌套值？

2 个答案: