校准热图数据

Question

我正在尝试用动态数据填充 HeatMap 日历 (http://cal-heatmap.com/)。所以我从文件中获取不同的日期并将它们转换为毫秒以创建日历所需的键值对。

我是这样做的：

var aux = {};
var dataJSON = {};
for(var i=0; i<activity.length; i++) {
   var date = new Date(activity[i].date);  // Date of activity
   var ms = date.getTime();                // Date Conversion
   aux[ms] = 1;                            // Pair "Key-Value" for calendar data
   dataJSON = JSON.stringify(aux);         // Convert to JSON format
}

如果我打印 dataJSON 的结果，我得到（显然）正确的对象：

{"1426204800000":1,"1426464000000":1,"1426636800000":1,"1426550400000":1,"1425945600000":1,"1426118400000":1,"1426032000000":1,"1432771200000":1,"1432857600000":1,"1432598400000":1,"1432684800000":1,"1432080000000":1,"1432166400000":1,"1425513600000":1,"1435708800000":1,"1439164800000":1,"1425427200000":1,"1432512000000":1,"1439251200000":1,"1425340800000":1,"1432252800000":1,"1439337600000":1,"1425254400000":1,"1425859200000":1,"1425686400000":1,"1435881600000":1,"1425600000000":1,"1435795200000":1,"1436400000000":1,"1436313600000":1,"1436227200000":1,"1436140800000":1,"1435536000000":1,"1434931200000":1,"1427673600000":1,"1434758400000":1,"1435276800000":1,"1427760000000":1,"1435190400000":1,"1435104000000":1,"1435017600000":1,"1427241600000":1,"1434672000000":1,"1427155200000":1,"1434585600000":1,"1427414400000":1,"1434499200000":1,"1427328000000":1,"1434412800000":1,"1433980800000":1,"1433894400000":1,"1434326400000":1,"1426809600000":1,"1427068800000":1,"1427846400000":1,"1434067200000":1,"1428451200000":1,"1438646400000":1,"1428364800000":1,"1438560000000":1,"1428278400000":1,"1438387200000":1,"1438905600000":1,"1438819200000":1,"1428537600000":1,"1438732800000":1,"1430092800000":1,"1430179200000":1,"1437177600000":1,"1437091200000":1,"1430265600000":1,"1429488000000":1,"1436486400000":1,"1429747200000":1,"1437004800000":1,"1429833600000":1,"1436918400000":1,"1429574400000":1,"1436832000000":1,"1429660800000":1,"1436745600000":1,"1429142400000":1,"1429228800000":1,"1428969600000":1,"1429056000000":1,"1435622400000":1,"1428883200000":1,"1428624000000":1,"1428710400000":1,"1430956800000":1,"1430870400000":1,"1430784000000":1,"1430697600000":1,"1431043200000":1,"1424736000000":1,"1424649600000":1,"1431907200000":1,"1424908800000":1,"1431648000000":1,"1424822400000":1,"1424995200000":1,"1431993600000":1,"1438300800000":1,"1431475200000":1,"1431561600000":1,"1431302400000":1,"1424476800000":1,"1431388800000":1,"1423958400000":1,"1438128000000":1,"1423872000000":1,"1438041600000":1,"1424131200000":1,"1424304000000":1,"1424217600000":1,"1430352000000":1,"1437609600000":1,"1437523200000":1,"1437436800000":1,"1437350400000":1,"1423180800000":1,"1433203200000":1,"1437955200000":1,"1433116800000":1,"1423612800000":1,"1423526400000":1,"1437696000000":1,"1433376000000":1,"1433289600000":1,"1438214400000":1,"1433808000000":1,"1433721600000":1};

但是，我在日历上看不到结果。这是日历配置：

var cal = new CalHeatMap();
cal.init({
  itemSelector: "#cal-heatmap",
  domain: "month",
  subDomain: "x_day",
  start: new Date(init),
  data: dataJSON
});

无论如何，我用这些静态数据试了一下，令人惊讶的是，它有效：

var dataJSON = {"1420498800":2,"1420585200":4,"1420671600":2,"1420758000":1,"1421103600":2,"1421190000":1,"1421276400":1,"1421362800":1,"1421622000":1,"1421708400":1,"1422226800":1,"1422313200":1,"1422399600":2,"1422486000":1,"1422572400":1,"1423695600":3,"1424127600":2,"1424214000":1,"1424300400":3,"1424386800":1,"1424646000":2,"1424732400":1,"1424818800":2,"1424905200":2,"1424991600":1,"1425337200":1,"1425855600":4,"1426201200":2,"1426460400":2,"1426546800":1,"1426633200":2,"1426719600":1,"1426806000":1,"1427065200":1,"1427151600":1,"1427238000":2,"1427324400":1,"1427670000":2,"1428361200":2,"1428447600":2,"1428534000":3,"1428620400":3,"1428966000":2,"1429138800":2,"1429225200":1,"1429484400":2,"1429570800":1,"1429657200":2,"1429743600":2,"1429830000":3};

另一方面，我从 d3.js 收到以下 GET 错误：

GET http://localhost:9000/%7B%221426204800000%22:2,%2...2,%221433808000000%22:2,%221433721600000%22:2%7D

Aborted

希望您能指出我的错误，在此先感谢。

Answer 1

数据转换需要通过"afterLoadData(data)"函数完成。所以，在我的例子中：

var parserData = function (data) {
  var dataJSON = {};

  for(var i=0; i<data.length; i++) {
    var date = new Date(data[i].date); // Date of activity 
    var sec = date.getTime()/1000; // Convert to sec

    // Pair "Key-Value" for calendar data
    if(dataJSON[sec]) {
      dataJSON[sec]++;
    } else {
      dataJSON[sec] = 1;
    }
  }

  return dataJSON;
}

var cal = new CalHeatMap();
cal.init({
   itemSelector: "#cal-heatmap",
   domain: "month",
   subDomain: "x_day",
   data: activity_sorted_by_date, // Dates Array
   afterLoadData: parserData      // Parser function
});

校准热图数据

Cal-HeatMap Data

javascript

json

d3.js

cal-heatmap