使用 cal-heatmap 显示外部数据时出现问题答案

【问题标题】：Problems displaying external data with cal-heatmap使用 cal-heatmap 显示外部数据时出现问题
【发布时间】：2016-04-22 10:47:06
【问题描述】：

我正在使用 D3 日历热图库，cal-heatmap。

我在 GitHub 上托管了一个 external JSON 文件，我通过 jQuery .getJSON 回调函数获取该文件。我正在使用 cal-heatmap 将 JSON 文件中的原始数据解析为 format compatible。

数据被解析和转换得很好，但它没有被加载到日历中。我尝试使用各种 cal-heatmap afterLoad 和 afterLoadData 事件来加载数据，但数据仍然没有显示。

我在JSbin 上有一份该项目的副本。

// global data variable
var data = null;

// Convert running log JSON data into readable format for heatmap calendar
function convertRunningLog() {

    // set get URL
    var json_url = "https://raw.githubusercontent.com/kylesb/static/master/JSON/running_log.json";
    // declare object variable
    var ob = {};

    // Get running log file from repository
    $.getJSON(json_url, function(result){

        // for each data entry
        for (var i = 0; i < result.data.length; i++) {

            // get date and miles
            var apoche  = date_to_epoch(result['data'][i]['date']).toString();
            var miles   = parseFloat(result['data'][i]['miles']); 

            // set date and miles
            ob[apoche.toString()] = miles;
        }
        var json_string = JSON.stringify(ob);
        data = JSON.parse(json_string);
        console.log(data);
        return data;
    });
}

// Convert strings to date objects 
function date_to_epoch(key) { 
    var epoch_seconds = new Date(key).getTime();
    return Math.floor (epoch_seconds / 1000);
}

// initilize the calendar
// ------------------------
var cal = new CalHeatMap();
cal.init({
  itemSelector: "#cal",
  domain: "month",
  subDomain: "x_day",
  data: convertRunningLog(),
  start: new Date(2016, 0, 5),
  cellSize: 20,
  cellPadding: 5,
  domainGutter: 20,
  range: 1,
  domainDynamicDimension: false,
  previousSelector: "#example-g-PreviousDomain-selector",
  nextSelector: "#example-g-NextDomain-selector",

  subDomainTextFormat: "%d",
  legend: [0.5, 1, 1.5, 2]
});

【问题讨论】：

标签： javascript json d3.js cal-heatmap

【解决方案1】：

$.getJSON 是一个 async 调用。它立即返回并在完成时调用结果回调。因此，您的 convertRunningLog 函数不返回任何内容。为了让它工作，你的CalHeatMap 代码需要在结果回调中。此外，如果您只使用jquery 进行ajax 调用，您可以使用d3s corresponding method 并节省jquery 的加载时间。

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.css" />
  <script src="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.js"></script>
</head>

<body>
  <div id="cal"></div>
  <script>
    // global data variable
    var data = null;

    // Convert running log JSON data into readable format for heatmap calendar
    function convertRunningLog() {

      // set get URL
      var json_url = "https://raw.githubusercontent.com/kylesb/static/master/JSON/running_log.json";
      // declare object variable
      var ob = {};

      // Get running log file from repository
      d3.json(json_url, function(error, result) {
        
        // for each data entry
        for (var i = 0; i < result.data.length; i++) {

          // get date and miles
          var apoche = date_to_epoch(result['data'][i]['date']).toString();
          var miles = parseFloat(result['data'][i]['miles']);

          // set date and miles
          ob[apoche.toString()] = miles;
        }
        
        var json_string = JSON.stringify(ob);
        data = JSON.parse(json_string);

        var cal = new CalHeatMap();
        cal.init({
          itemSelector: "#cal",
          domain: "month",
          subDomain: "x_day",
          data: data,
          start: new Date(2016, 0, 5),
          cellSize: 20,
          cellPadding: 5,
          domainGutter: 20,
          range: 1,
          domainDynamicDimension: false,
          previousSelector: "#example-g-PreviousDomain-selector",
          nextSelector: "#example-g-NextDomain-selector",

          subDomainTextFormat: "%d",
          legend: [0.5, 1, 1.5, 2]
        });


      });
    }

    // Convert strings to date objects 
    function date_to_epoch(key) {
      var epoch_seconds = new Date(key).getTime();
      return Math.floor(epoch_seconds / 1000);
    }

    convertRunningLog();
    
  </script>
</body>

</html>

【讨论】：

感谢您的解释！我认为这与回调没有立即返回数据有关，在结果回调中添加热图对象初始化是有道理的。
我真的很困惑如何返回这样的数据{"1448841600":249,"1448928000":274,"1449014400":295} 并通过这个答案弄清楚了，非常感谢@Mark！