将D3热力图代码转换为使用JSON而不是TSV

Question

我将尝试使用D3热图：http://bl.ocks.org/tjdecke/5558084，但是修改代码时遇到了问题。示例展示了如何使用.tsv文件，但我想要使用.json文件。

所以，我需要修改tsvFiles的代码，如下所示：

var heatmapChart = function(tsvFile) {
        d3.tsv(tsvFile,
        function(d) {
          return {
            day: +d.day,
            hour: +d.hour,
            value: +d.value
          };
        },
        function(error, data) {
          // eliminate code
        });  
      };

我尝试切换到json（但它不起作用）：

d3.json("./data/data.json",
            function(d) {
                    return {
                        day: +d.day + 1,
                        hour: +d.hour + 1,
                        value: +d.value
                    };
                },

                function(error, data) {
                     // eliminate error
 });

- stackyyflow

Answer 1

d3.json不支持使用访问器函数，只有d3.csv和d3.tsv支持它（访问器函数是指在您的片段中"data.json"和"function(error,data)"之间的函数）。

因此，将您的d3.json函数更改为：

d3.json("./data/data.json",  function(error, data) {
    //the rest of your code
});

在“您的代码的其余部分”中编写访问器函数。在您的情况下，可以编写以下内容：

data.forEach(function(d) {
    return {
         day: +d.day + 1,
          hour: +d.hour + 1,
          value: +d.value
     };
 });

此外，仅当您的JSON完全模仿由d3.tsv创建的对象数组的结构时，此方法才适用。

- Gerardo Furtado