Question

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

我已经尝试用treemap javascript文件中的getChildren（d）替换d.children（）的所有实例，但似乎它无法正常工作。

结果页面显示橙色条在顶部正常，但没有其他任何显示正确（即橙色条下面没有矩形，只是空的灰色空间）。来自子项的所有文本都被混淆在空白灰色空间的左上角，因此可能没有正确分配坐标。

任何想法？谢谢！

Answer 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由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（因此他们都有体重0）

因为您使用的是“zoomable”树形图方法，它使用树形图布局的专用版本，所以您无需指定树形图布局的.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/

D3 Zoomable Treemap更改子访问器

1 个答案: