Question

我正在使用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]
});

Answer 1

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

＆＃13;

jquery

＆＃13;

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

1 个答案: