D3热图将代码转换为使用json而不是tsv [英] D3 heatmap convert code to use json instead of tsv

问题描述

我正在尝试使用D3热图: http://bl.ocks.org/tjdecke/5558084 ，但无法更改代码.该示例显示了.tsv文件的使用，但我想改用.json文件.

I am trying to use D3 heatmap: http://bl.ocks.org/tjdecke/5558084 but had trouble changing the code. The example shows the use of .tsv files but I want to use .json file instead.

因此，而不是如下所示的tsvFiles代码:

So instead of tsvFiles code as show below:

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(但不起作用):

I tried changing to json (but it does not work):

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

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

推荐答案

d3.json不接受访问器函数，只有d3.csv和d3.tsv接受它(访问器函数是"data.json之间的函数"中的"和函数(错误(数据)").

d3.json doesn't accept an accessor function, only d3.csv and d3.tsv accept it (the accessor function is that function between "data.json" and "function(error, data)" in your snippet).

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

So, change your d3.json function to:

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

然后，在其余代码"中，编写访问器函数.您的情况是这样的:

And, in "the rest of your code", write the accessor function. In your case, something like this:

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

此外，这仅在您的JSON精确模拟由d3.tsv创建的对象数组的结构时有效.

Also, this will only work if your JSON mimics exactly the structure of the array of objects created by d3.tsv.

这篇关于D3热图将代码转换为使用json而不是tsv的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！