我正在开发基于 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; });
});
根据此数据,我预计“ cooking ”会在左侧占据很大的空间,但由于某种原因它位于右侧。正如您在代码中看到的,我一直在使用“排序”(已注释掉),但我仍然没有弄清楚如何使其正常工作。
任何意见/建议/等等。非常感谢。 :)
编辑:保持通用的代码一致性
最佳答案
您可以在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; });
关于jquery - d3.js Treemap - 有没有办法指定显示首选项(排序)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13022080/