2016-10-03 5 views
2

D3ヒートマップを使用しようとしています:http://bl.ocks.org/tjdecke/5558084しかし、コードを変更する際に問題がありました。この例では.tsvファイルを使用していますが、代わりに.jsonファイルを使用したいとします。だからではなく、tsvFilesコードのD3 heatmapはtsvの代わりにjsonを使用するようにコードを変換します

ショー以下のように:

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 
}); 

答えて

4

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によって作成されたオブジェクトの配列の正確な構造に動作します。

関連する問題