1

我正在尝试使用 Mike Bostock 的可缩放树形图 http://bost.ocks.org/mike/treemap/进行一次修改。我没有使用嵌套的 JSON 数据，而是有一个从父级到子级列表的简单映射。我构建了一个函数 getChildren(root)，它只返回 root 的孩子，如果 root 没有任何孩子，则返回 null。

我尝试在树形图 javascript 文件中用 getChildren(d) 替换 d.children() 的所有实例，但它似乎无法正常工作。

结果页面将橙色条显示为正常的顶部，但没有其他内容正确显示（即橙色条下方没有矩形，只有空白的灰色空间）。孩子们的所有文本都混杂在空白灰色空间的左上角，因此可能是坐标分配不正确。

有任何想法吗？？谢谢！

4

1 回答 1

1

看起来这里有几个问题：

  • 您的数据结构似乎没有引用子节点：

    var nMap = {};
nMap.papa = {};
nMap.papa["children"] = [];
nMap.papa["children"].push({
    "name": "c1"
});
// snip
nMap.c1 = {
    size: 5
};

    除非我遗漏了什么，否则您的getChildren函数会获取{ name: "c1" }对象但从不查找nMap.c1。我不完全确定您的替代数据结构试图实现什么，但似乎最明显的选择是使用节点的平面图，子节点由 id 引用，如下所示：

    var nMap = {};
nMap.c1 = {
    name: "c1",
    value: 5
};
nMap.c2 = {
    name: "c2",
    value: 5
};
nMap.c3 = {
    name: "c3",
    value: 5
};
nMap.papa = {
    name: "papa",
    children: ['c1', 'c2', 'c3']
};

    使用这样的结构，您可以映射到getChildren函数中的真实子代：

    function getChildren(par){
     var parName = par.name,
         childNames = parName in nMap && nMap[parName].children;
     if (childNames) {
         // look up real nodes
         return childNames.map(function(name) { return nMap[name]; });
     } 
}

  • 您的孩子使用size而不是value表示重量，其余代码是预期的value（所以他们都有 weight 0）。

  • 因为您使用的是“可缩放”树图方法，它使用树图布局的专用版本，所以您不需要指定.children树图布局的访问器。相反，请在自定义layout帮助程序中使用您的自定义访问器：

    function layout(d) {
    // get the children with your accessor
    var children = getChildren(d);
    if (children && children.length > 0) {
        treemap.nodes({ children: children });
        children.forEach(function(c) {
            c.x = d.x + c.x * d.dx;
            c.y = d.y + c.y * d.dy;
            c.dx *= d.dx;
            c.dy *= d.dy;
            c.parent = d;
            layout(c);
        });
    }
}

在这里工作小提琴：http: //jsfiddle.net/nrabinowitz/WpQCy/

于 2013-07-06T18:25:20.893 回答