D3热图将代码转换为使用json而不是tsv

sta*_*low 3 json d3.js

我正在尝试使用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
        });  
      };
Run Code Online (Sandbox Code Playgroud)

我尝试改为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
 });
Run Code Online (Sandbox Code Playgroud)

Ger*_*ado 5

d3.json不接受访问功能,只有d3.csvd3.tsv接受它(访问功能是在你的代码段"data.json"和"功能(错误数据)"之间的函数).

所以,将你的d3.json功能改为:

d3.json("./data/data.json",  function(error, data) {
    //the rest of your code
});
Run Code Online (Sandbox Code Playgroud)

并且,在"其余代码"中,编写访问器函数.在你的情况下,这样的事情:

data.forEach(function(d) {
    return {
         day: +d.day + 1,
          hour: +d.hour + 1,
          value: +d.value
     };
 });
Run Code Online (Sandbox Code Playgroud)

此外,这只有在您的JSON完全模仿由其创建的对象数组的结构时才有效d3.tsv.