d3.js Treemap - 有没有办法指定显示偏好（排序）？

Question

我正在开发基于 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; });
});

根据这些数据，我预计“烹饪”会在左侧占据很大的空间，但由于某种原因，它却在右侧。正如您在代码中看到的那样，我一直在玩“排序”（已注释掉），但我仍然没有弄清楚如何让它正常工作。

任何建议/建议/等。非常感谢。 :)

编辑：保持通用性的代码一致性

Answer 1

您可以在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; });