d3.js - 使用 d3.js 处理分层 JSON 数据

Question

我试图了解如何在 d3 中使用更复杂的数据集。下面我将展示我想要展示的 JSON 数据；

{
"questions": ["Large choice of food", "Food quality", "Food freshness", "Taste of food", "Waiting time to recieve food", "Value for money"],
"places": ["US", "UK", "TK"],
"dates": ["Jan", "Feb", "Mar"],
"values": [ 
[
    [24, 42, 72],
    [29, 45, 79],
    [34, 39, 84]
],
[
    [33, 73, 41],
    [21, 16, 45],
    [43, 22, 17]
],
[
    [75, 53, 78],
    [55, 33, 22],
    [94, 83, 99]
],
[
    [63, 37, 11],
    [47, 67, 62],
    [33, 34, 35]
],
[
    [43, 89, 78],
    [99, 92, 87],
    [41, 23, 71]
],
[
    [92, 11, 45],
    [100, 0, 50],
    [40, 72, 62]
]
]
}

从这里我希望能够选择一个问题，然后将其与地点 + 日期配对，然后基于此检索值。

我试图在网上找到可以帮助教育我如何以这种方式访问​​此类数据的资源，但我没有这样的运气。我创建了一个 plnk 来为此提供设置。

http://plnkr.co/edit/Cdwm5RXoIdBNg0uxeeP6?p=preview

所以问题是如何在d3中检索这些数据，并按照问题+[地点+日期][基于此的值]的顺序在控制台中显示。

在这个阶段，任何建议和良好教育资源的链接都会对我有很大帮助，

干杯

编辑:

上面的 JSON 格式可能有点困惑，这里也许是一个更简化的版本？

{
  "dates": ["Jan", "Feb", "Mar"],
  "questions": {
    "Large choice of food": {
      "US": [11, 15, 13],
      "UK": [25, 24, 39],
      "TK": [27, 23, 20]
    },
    "Food quality": {
      "US": [11, 15, 13],
      "UK": [25, 24, 40],
      "TK": [27, 23, 20]
    },
  }
}

Answer 1

这是我放在一起的东西，但它不是使用 D3，而是使用 Vanilla JS。所以我不确定你是否想要这个，但无论如何我都会把它扔进去。相当不言自明:http://plnkr.co/edit/ckm45FB3RVhofGbUjdBl?p=preview

主要代码块:

        var questionData = data.questions;
        var monthData = data.dates;
        var countryData = data.places; 

        //populate question drop down
        var questionSelect = document.getElementById('questionSelect');

        for(i=0;i<questionData.length;i++){
          var option = document.createElement('option');
              option.text = questionData[i];
              option.value = questionData[i];

              questionSelect.appendChild(option);
        }


         var submitButton = document.getElementById('submitButton');

         submitButton.addEventListener('click', getData);


         function getData(){
           var thisQuestion = document.getElementById('questionSelect').value;
           var thisCountry = document.getElementById('countrySelect').value;
           var thisMonth = document.getElementById('monthSelect').value;

           var questionIndex = questionData.indexOf(thisQuestion);
           var countryIndex = countryData.indexOf(thisCountry);
           var monthIndex = monthData.indexOf(thisMonth);

           var getValue = data.values[questionIndex][monthIndex][countryIndex]; //this is the found value
           console.log(getValue)
         }