3

我正在研究基于 d3.js 的 Treemap，http ://mbostock.github.com/d3/ex/treemap.html ，我是 D3 的新手。基本上，我有一个 JSON 文件中的值列表，并且正在创建一个基本的单父树形图，它在框中显示键，大小取决于键的值。

我遇到的我想解决的问题是我的数据倾向于将高端吸引到右边，所以所有的大盒子都在那里，所有的小盒子都在左边。在我的想法（以及设计师的想法）中，由于我们从左到右阅读，因此将较大的框放在左侧，将较小的框放在右侧会更有意义。显然，我们的尺寸不需要改变，只需改变它们的放置顺序。请参阅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 回答