Question

我正在研究基于d3.js的树形图，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; });

d3.js树形图 - 有没有办法指定显示首选项（排序）？

1 个答案: