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，而是使用香草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)
         }

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

1 个答案: