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
}
]
}
]
}
素晴らしい!私はまだそれを試していないが、これは本当に私の問題を解決する必要があります。私はこれを理解しようと2日間頭を悩ましてきた...ありがとう! –
あなたのソリューションは完璧です、どうもありがとうございます。 しかし、.nestの問題では、単にd3.v3.min.jsコードを変更し、 "key"と "value"を "name"と ".nest()関数の下の子"に変更しました。 –
@GuillaumeBolducは素晴らしく、うまくいきました。私は言いたいことですが、d3のソースを変更することは、まったくいい考えではありません。特に、簡単にできること実際、バージョン3を使っていることが分かったので、 'd.children'ではなく' d.values'を探す方法をパックレイアウトに伝えることができます。ソースを変更すると、変更したd3バージョン(npmやbowerを使用するのではなく)をコミットしない限り、d3バージョンを再インストールまたはアップグレードすると、d3ソースを再度変更しない限り、コードは破損します。 – meetamit