3

私はd3.jsベースのツリーマップ（http://mbostock.github.com/d3/ex/treemap.html ）に取り組んでおり、 D3は初めてです。基本的に、JSONファイルからの値のリストがあり、キーの値に応じてサイズがボックスにキーを表示する基本的な1つの親のツリーマップを作成しています。

私が解決したい問題は、データがハイエンドを右に引き寄せる傾向があるため、すべての大きなボックスがそこに行き着き、すべての小さなボックスが左側に行き着くということです。私の心（そしてデザイナーの心）では、左から右に読んでいるので、左側に大きなボックスを、右側に小さなボックスを配置する方が理にかなっています。明らかに、ディメンションを変更する必要はありません。配置されている順序だけを変更する必要があります。データが現在どのように表示されているかについては、http：//chrislcoray.com/browsertest/treemap_issue.jpgを参照してください。

たとえば、私のキーがブログページのタグであるとしましょう。私のJSON（ブログでJSONを使用している理由を聞かないでください。その例）は次のようになります。

{
    "name": "tags",
    "children": [
        {"name":"cooking", "size": 35},
        {"name":"video games", "size": 31},
        {"name":"book club", "size": 26},
        {"name":"knitting", "size": 23},
        {"name":"hunting", "size": 22},
        {"name":"farming", "size": 19},
        {"name":"athletics", "size": 6},
        {"name":"toys", "size": 3},
        {"name":"sanitizer", "size": 3},
        {"name":"pigs", "size": 2},
        {"name":"ducks", "size": 2},
        {"name":"wildlife", "size": 2},
        {"name":"automobiles", "size": 1},
        {"name":"waterbottles", "size": 1},
        {"name":"telephone cords", "size": 1},
        {"name":"lampshade hats", "size": 1}
    ]
}

私のD3は次のようになります。

var jsonFeed = '/JSON/tags.json';

var width = jQuery('#container').width(),
    height = jQuery('#container').height();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    //.sort(0)
    .value(function(d) { return d.size; });

var div = d3.select('#container');

d3.json(jsonFeed, function(json) {
    div.data([json]).selectAll('div')
        .data(treemap.nodes)
    .enter().append("div")
        .attr("class", "cell")
        .call(cell)
        .text(function(d) { return d.children ? null : d.name; });
});

このデータに基づくと、「料理」は左側で非常に大きなスペースを占めると思いますが、何らかの理由で右側にあります。コードからわかるように、私は「ソート」（コメントアウト）で遊んでいますが、それを正しく機能させる方法がまだわかりません。

アドバイス/提案/など。大変感謝しております。:)

編集：それを一般的に保つことにおけるコードの一貫性

4

1 に答える 1

5

http://jsfiddle.net/WYqRj/2/で実際の例を見ることができます。

あなたは近くにいました. に適切なコンパレータ関数を定義するだけですsort. 降順でソートする単純なものを実装しました。

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .sort(function(a,b) { return a.size - b.size; })
    .round(true)
    .value(function(d) { return d.size; });
于 2012-10-23T01:32:58.563 に答える