16

csvファイルからツリーマップを作成しています。csv ファイルのデータは階層化されているため、d3.nest().

ただし、結果の JSON は{key:"United States", values:[...]}. ズーム可能なツリーマップには、階層が必要{name:"United States", 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 で名前と子のラベルが必要なため、ズーム可能なツリーマップを使用できません。

4

4 に答える 4

10

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

ズーム可能なツリーマップの例では、「子」だけでなく「名前」と「サイズ」も必要です。次のいずれかを実行できます。

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

ソースコードを変更しましょう。

1.1) 79 行目と 86 行目:

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

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

「.name」を「.YOUR_NAME_KEY」(つまり「.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;
}

「.size」を「.YOUR_SIZE_KEY」に置き換えます（結果のJSONで言及していませんでした）

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

PS多分何かが省略されているので、自分で確認する必要があります。

2) Array.map()を使用して例に合うように JSON 構造を変換します。

于 2013-07-02T06:57:28.320 に答える
8

children(function)この問題への最も簡単なアプローチは、ツリーマップと.value(function)メソッドを使用して、ネストされたデータセット内のプロパティの名前を指定することであるという@Andersonに完全に同意します。

ただし、質問者がアプローチを使用して具体的に助けを求める重複した質問が最近投稿されました。Array.mapだからここにあります：

配列map(function)メソッドは、配列の各要素が元の配列の各要素に対して指定された関数を実行した結果である新しい配列を作成します。具体的には、関数は、元の配列の要素、その要素のインデックス、および元の配列全体の 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

おそらくこれを再帰関数で実装することもできます。これは、ネストのレベルがさらに多い場合に特に役立ちます。

于 2014-04-29T15:43:15.390 に答える
2

皆さん、私はかなり簡単な解決策を見つけたと思います。私は非常に合理的な方法で、階層棒グラフ用の大規模なデータセット (400,000 行) の非常に優れたネストを達成しました。Underscore ライブラリと追加関数 _.nest を利用します。必要な 2 つのライブラリをダウンロードして含めるだけです。

「アンダースコア-min.js」「アンダースコア.nest.js」

次に、_.nest 関数を使用して構造を作成します。これが私の行です：

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

「Material」と「StudyName」は、構造をグループ化したい列です。

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

于 2014-10-22T14:28:19.417 に答える