2016-07-20 26 views
0

d3.packを使用して3つの異なる階層の視覚化を生成するために必要なJSONファイルがあります。d3.pack単一のJSONを使用する複数の階層

JSONファイルには、eventA(1または0)とeventB(1または0)の情報が含まれています。各リーフにも一意のIDがあります。

次のように階層を表示する必要があります。 第1階層:総人口(10000要素がある場合は、すべて10000を表示)。 第2階層:eventA(したがって、すべて1とすべて0をグループ化する) 第3階層:eventB、eventA値で細分化。

現時点では、3つの異なる多次元JSONファイルを使用していますが、これはあまり効率的ではなく、単に古いデータを消去して新しいデータを作成するだけです。しかし、トランジションは私がする必要があるために重要なので、それを静かにカットしません。

私はこれをどのように達成できるかについて誰かが手がかりを持っていますか?

私はコードを探しているわけではありません。私は問題にどのようにアプローチできるかを提案しています。

JSONデータの例を次に示します。

{ 
    "name":"Total", 
    "children":[ 
    { 
     "name":"POPULATION (n=20)", 
     "children":[ 
     { 
      "id":1, 
      "eventA":1, 
      "eventB":1, 
      "size":50 
     }, 
     { 
      "id":2, 
      "eventA":1, 
      "eventB":1, 
      "size":49 
     }, 
     { 
      "id":3, 
      "eventA":1, 
      "eventB":1, 
      "size":48 
     }, 
     { 
      "id":4, 
      "eventA":1, 
      "eventB":1, 
      "size":47 
     }, 
     { 
      "id":5, 
      "eventA":1, 
      "eventB":0, 
      "size":46 
     }, 
     { 
      "id":6, 
      "eventA":0, 
      "eventB":1, 
      "size":45 
     }, 
     { 
      "id":7, 
      "eventA":0, 
      "eventB":1, 
      "size":44 
     }, 
     { 
      "id":8, 
      "eventA":0, 
      "eventB":1, 
      "size":43 
     }, 
     { 
      "id":9, 
      "eventA":0, 
      "eventB":1, 
      "size":42 
     }, 
     { 
      "id":10, 
      "eventA":0, 
      "eventB":0, 
      "size":41 
     }, 
     { 
      "id":11, 
      "eventA":0, 
      "eventB":0, 
      "size":40 
     }, 
     { 
      "id":12, 
      "eventA":0, 
      "eventB":0, 
      "size":39 
     }, 
     { 
      "id":13, 
      "eventA":0, 
      "eventB":0, 
      "size":38 
     }, 
     { 
      "id":14, 
      "eventA":0, 
      "eventB":0, 
      "size":37 
     }, 
     { 
      "id":15, 
      "eventA":0, 
      "eventB":0, 
      "size":36 
     }, 
     { 
      "id":16, 
      "eventA":0, 
      "eventB":0, 
      "size":35 
     }, 
     { 
      "id":17, 
      "eventA":0, 
      "eventB":0, 
      "size":34 
     }, 
     { 
      "id":18, 
      "eventA":0, 
      "eventB":0, 
      "size":33 
     }, 
     { 
      "id":19, 
      "eventA":0, 
      "eventB":0, 
      "size":32 
     }, 
     { 
      "id":20, 
      "eventA":0, 
      "eventB":0, 
      "size":31 
     } 
     ] 
    } 
    ] 
} 

答えて

0

あなたは約d3.nestを知っていますか?それはおそらくあなたがこれに使用したいものです。その場合、あなたは(私は意味のあるそれらのものを呼び出すことかわからなかったので、私はname1name2を使用し、注)

var flatData = [ 
    { 
    "name1": "Total", 
    "name2": "POPULATION (n=20)", 
    "id": 1, 
    "eventA": 1, 
    "eventB": 1, 
    "size": 50 
    }, 
    { 
    "name1": "Total", 
    "name2": "POPULATION (n=20)", 
    "id": 2, 
    "eventA": 1, 
    "eventB": 0, 
    "size": 49 
    }, 
    { 
    "name1": "Total", 
    "name2": "POPULATION (n=20)", 
    "id": 3, 
    "eventA": 0, 
    "eventB": 1, 
    "size": 48 
    }, 
    ... 
] 

のように、フラットな配列としてデータをロードします。

そこから、あなたをグループ化すると、投稿にそれを回すために:

d3.nest() 
    .key(function(d) { return d.eventA }) 
    .entries(dataset) 

d3.nest() 
    .key(function(d) { return d.name1 }) 
    .key(function(d) { return d.name2 }) 
    .entries(dataset) 

そして、あなたが説明したグループ3の第二に、それを得るために(eventAの値によって)

そして、あなたをグループ化する第三にそれを得るためには、(eventAによって、その後eventBの値によって)説明:

0そのd3.nestはそれぞれ、keyvaluesそれらを呼び出すだろう除き、あなたが得るの

結果は、あなたがnamechildrenを示しているものと階層的に似ています。私はd3の階層レイアウト(パックを含む)がkeychildrenと考えているので、やや不便です。しかし、ネスト操作後にキーを簡単に再マップできます。

d3.nestオブジェクトでは、最下位グループのすべての値を単一の値に変換する方法(方法)を教えてくれるrollup関数も使用できます。たとえば、これは指定されたeventAグループ値のすべてのサイズを合計します。

d3.nest() 
    .key(function(d) { return d.eventA; }) 
    .rollup(function(values) { return d3.sum(values, function(d) { return d.size; }) }) 
    .entries(dataset); 
+0

素晴らしい!私はまだそれを試していないが、これは本当に私の問題を解決する必要があります。私はこれを理解しようと2日間頭を悩ましてきた...ありがとう! –

+0

あなたのソリューションは完璧です、どうもありがとうございます。 しかし、.nestの問題では、単にd3.v3.min.jsコードを変更し、 "key"と "value"を "name"と ".nest()関数の下の子"に変更しました。 –

+0

@GuillaumeBolducは素晴らしく、うまくいきました。私は言いたいことですが、d3のソースを変更することは、まったくいい考えではありません。特に、簡単にできること実際、バージョン3を使っていることが分かったので、 'd.children'ではなく' d.values'を探す方法をパックレイアウトに伝えることができます。ソースを変更すると、変更したd3バージョン(npmやbowerを使用するのではなく)をコミットしない限り、d3バージョンを再インストールまたはアップグレードすると、d3ソースを再度変更しない限り、コードは破損します。 – meetamit

関連する問題