jquery - d3.js Treemap - 有没有办法指定显示首选项(排序)?

标签 jquery d3.js treemap

我正在开发基于 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/

相关文章:

javascript - 如何在不返回 false 的情况下修复 div 中的返回 Ajax

javascript - 如何销毁由同一原始函数构建的多个 C3 图

java - 使用字符串和列表 bean 作为参数对 TreeMap 中的值进行排序

javascript - 删除移动设备上的 'scroll up' 脚本

javascript - 将空表行附加到表

javascript - jQuery-UI:即使鼠标位于放置区域内,拖放有时也不起作用

javascript - 根据画笔范围更新圆环图弧

d3.js - 使用 tickSizeOuter(0) 删除 y 轴结束刻度不起作用

java - 树状图放置似乎正在删除条目

java - 在 Java 中将 map 从每日数据转换为每周数据