D3.js treemap-是否可以指定显示偏好(排序)的方法

Question

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

我想解决的问题是我的数据倾向于将高端倾斜到右侧，因此所有大盒子都在那儿到达那里，所有小盒子最终都落在左侧。在我的脑海中（以及设计师的思想），由于我们从左到右阅读，在左侧有较大的盒子以及右侧的较小盒子会更有意义。显然，我们的尺寸不需要更改，只有它们要投入的顺序。请参阅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; });
});

基于这些数据，我希望"烹饪"在左侧占用很大的空间，但是由于某种原因，它是在右边。正如您在代码中看到的那样，我一直在玩" sort"（已注释），但是我仍然没有弄清楚如何使其正常工作。

任何建议/建议/等。非常感谢。：）

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

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; });