d3.nest（）キーと名前と子への値の変換

Question

私はcsvファイルからTreemapを作成しています。 csvファイルのデータは階層的です。その結果、私はd3.nest（）を使用しました。例えば、（http://mbostock.github.io/d3/talk/20111018/treemap.html） のズーム可能なツリーマップは、{name： "United States"、children：[children]]という階層を必要とします。 ...]}。 例では名前と子をキーと値に置き換えようとしましたが、それはうまくいきません。 ズーム可能なツリーマップ上で既にキーと値を使用している人がいる場合は、助けてください。私はD3が初めてで、d.childrenがデータから構造や値を意味するのかどうかはわかりません。

これは、世界大陸、地域、国をCSVからd3を使用する階層に変換するためのコードです。

$ d3.csv("../Data/WorldPopulation.csv", function (pop) { var treeData= { "key": "World", "values": d3.nest() .key(function (d) { return d.Major_Region; }) .key(function (d) { return d.Region; }) .key(function (d) { return d.Country; }) .entries(pop) };

結果の最初の数行は次のとおりです。

`[{"key":"AFRICA","values":[{"key":"Eastern Africa","values" 
[{"key":"Burundi","values":[.........` 

それはむしろ、キーと値よりもJSONで名と子供のラベルを必要とするため、私はズーム可能なツリーマップを使用することはできません。

Answer 1

ネストをツリーマップに変換する最も良い方法は、子アクセッサ関数をTreemap.children()で指定することです。

ズーム可能なツリーマップの例では、「子供」だけでなく「名前」と「サイズ」も必要です。

1）「キー」と「値」を使用し続けるように、これらのプロパティのアクセサ機能を変更します。

source codeを変更してください。

1.1）ライン79 & 86：

.style("fill", function(d) { return color(d.parent.name); }); 

.text(function(d) { return d.name; }) 

".YOUR_NAME_KEY "と ".nameの"（すなわち" .KEY" を置き換え）

.style("fill", function(d) { return color(d.parent.YOUR_NAME_KEY); }); 

.text(function(d) { return d.YOUR_NAME_KEY; }) 

1.2）はライン47：

var treemap = d3.layout.treemap() 
.round(false) 
.size([w, h]) 
.sticky(true) 
.value(function(d) { return d.size; }); 

子アクセッサ機能を指定する行を追加します（つまり、 ".values"）

var treemap = d3.layout.treemap() 
.round(false) 
.size([w, h]) 
.sticky(true) 
.value(function(d) { return d.YOUR_SIZE_KEY; }) 
.children(function(d){return d.YOUR_CHILDREN_KEY}); 

1.3）は、ライン97 & 51：

function size(d) { 
    return d.size; 
} 

".YOUR_SIZE_KEY" と ".size"（あなたはあなたの結果のJSONには言及しなかった）

function size(d) { 
    return d.YOUR_SIZE_KEY; 
} 

P.S.を交換してくださいたぶん何かが省略されているかもしれません。

2）Array.map()の例に合わせてJSON構造を変換します。

Answer 2

この問題の最も簡単なアプローチは、ネストされたデータセット内のプロパティの名前を指定するのにtreemap children(function)と.value(function)メソッドを使用することです。

ただし、質問者が具体的にArray.mapアプローチを使用して助けを求めているduplicate question has recently been postedです。

array map(function) methodは、配列の各要素が元の配列の各要素で指定された関数を実行した結果である新しい配列を作成します。具体的には、関数は最大3つの引数で実行されます。元の配列の要素、その要素のインデックス、元の配列全体です。プロパティ名を操作する目的で、最初の引数のみが必要です。

元の投稿のネストされたデータには、3つのキー機能に相当する3つのレベルがあります。したがって、我々は、3レベルのマッピング機能を必要としている：あなたはまた、おそらくあなたは、ネストのより多くのレベルを持っていた場合に特に有用であろう再帰関数、でこれを実装することができ

var treeData= { "key": "World", "values": 
     d3.nest() 
     .key(function (d) { return d.Major_Region; }) 
     .key(function (d) { return d.Region; }) 
     .key(function (d) { return d.Country; }) 
     .entries(pop) 
     }; 

var treeData2 = { "name": "World", "children": 
     treeData.values.map(function(major){ 

      return { "name": major.key, "children": 
       major.values.map(function(region){ 

       return { "name": region.key, "children": 
        region.values.map(function(country){ 

         return { "name": country.key, "children": country.values }; 

        }) //end of map(function(country){ 
       }; 

       }) //end of map(function(region){ 
      }; 

     }) //end of map(function(major){ 
     }; //end of var declaration 

。

Answer 3

私はかなり簡単な解決策を見つけたと思う。私は非常に合理的な方法で階層的な棒グラフのための大規模なデータセット（400,000行）の非常に良い入れ子を達成しました。 Underscoreライブラリと追加の関数_.nestを使用します。 単にあなたの構造を作成する_.nest機能を使用すると

「underscore.nest.js」 「-min.jsを強調する」必要

をダウンロードして、2つのライブラリが含まれています。ここに私のラインがあります：

var newdata = _.nest(data, ["Material", "StudyName"]); 

"Material"と "StudyName"は私の構造をグループ化したい列です。あなたの変換されたオブジェクト内の「サイズ」という名前のプロパティがあります

は、あなたがより多くのことを達成するために必要がある場合は、この機能を使用するには、他のオプションがありますが、私はこの