D3/Javascript

Question

JavaScriptでデータを操作する方法がわかりません。基本的に私はいくつかのD3ビジュアライゼーションに取り組んでいます。そこでは、データをビジュアルで動作させるためにデータを操作する必要があります。ここでは、既存のデータに基づいてオブジェクトの配列に新しいデータを追加しようとしています。

基本的に、配列内の各オブジェクトの新しいデータ/プロパティを「追加」する方法を理解しようとしています。ここで

は、配列は次のようになります。ここでは

、私は（4つの新しいキーで）増強オブジェクトの新しい配列を返すようにやろうとしていますものです：

 function getTileData(rawdata) { 
     return data.map(function(d,i) { 
      // positioning for square visual 
      // stored here to make it easier 
      // to keep track of. 
      d.col = i % numPerRow; 
      d.x = d.col * (squareSize + squarePad); 
      d.row = Math.floor(i/numPerRow); 
      d.y = d.row * (squareSize + squarePad); 
      return d; 
     }); 
     }; 

任意の考え？基本的に私は興味がありました： 1.上記のマップ方法で正しい軌道に乗っていますか？
2.この新しい情報を追加する良い方法はありますか？私はかなり緑色で、データはjavascriptで表示されています。

Answer 1

だからいくつかの実際の調査の後、私は次のような方法で私のコードを改質するために必要なことを考え出し：ここ

 function parseTileData(rawdata) { 
     var new_data2 = rawdata.map(function(d,i) { 
      d.col = i % numPerRow; 
      d.x = d.col * (squareSize + squarePad); 
      d.row = Math.floor(i/numPerRow); 
      d.y = d.row * (squareSize + squarePad); 
      return d; 
     }); 

     return new_data2; 
     }; 

私が作成する正しい構文でマッピングされた配列から作成された新しい配列を持っています新しい列はアイテムを反復処理するときにそのアイテムを返します。

Answer 2

1. rawdataを操作したいのでreturn rawdata.map...にしてください。
2. numPerRowはどこに宣言しましたか？

3. これにより、これらのプロパティを追加したまったく新しいオブジェクトが作成され、大きなサイズのオブジェクトが2つ作成されます。 RAWデータが不要になった場合は、IIFEを使用してrawdataを取得し、外側のスコープ変数に格納する方が良いと思うので、新しいデータのみがメモリに保存され、大きなデータセットではパフォーマンスが向上します。次に例を示します。

   (function(){ 
       //Fetch the rawdata here using an AJAX request 
       $.ajax({ 
        ... 
        success: assignData 
       }) 
   })(); 
   //As soon as the above ends, rawData goes out of scope, leaving you with only the new data. 
   //I may be wrong in assuming that you'll need rawdata only once. 
   
   var newData = [], numPerRow = //your nums per row; 
   function assignData(data){ 
       data.map(function(d,i){ 
        d.col = i % numPerRow; 
        d.x = d.col * (squareSize + squarePad); 
        d.row = Math.floor(i/numPerRow); 
        d.y = d.row * (squareSize + squarePad); 
        newData.push(d); 
       }); 
   }