javascript - D3 嵌套 - 层数不一致

Question

我正在尝试以这样的方式嵌套 JSON 数据，以便我可以轻松地从中创建 d3 树。我有这个代码:

d3.json("dbdata/getdata", function(error, data) {


var nestedData = {
    "key":"root",
    "values":
       d3.nest()
            .key(function(d){return d.category1})
            .key(function(d){return d.category2})
            .key(function(d){return d.category3})
            .key(function(d){return d.category4})
            .entries(data) }

我遇到的问题是，并非数据中的所有条目都分配有所有四个类别。其中一些只有类别 1 和类别 2，因此在这种情况下，我希望该链接(在树形图上)上只有两个节点。但这里发生的情况是，所有链接都会获得四级结构，即使它们没有分配所有类别。如果我有一个只有两个类别(类别 1 和类别 2)的集合，则类别 1 位于正确的位置，类别 2 位于末尾，并且在它们之间创建两层空数据。

有没有一种方法可以指定在嵌套过程中忽略哪些内容(在我的数据集中，空类别被分配为“0”)？我尝试过这样的事情:

.key(function(d){if(d.category2 !=="0")return d.category3})

但它只是将“0”更改为“未定义”，并没有改变结构。

或者也许有一种方法可以更改 d3 代码，这样我就会忽略那些空级别？我是 d3 新手，我的代码完全基于以下示例:http://mbostock.github.io/d3/talk/20111018/tree.html

编辑:

鉴于数据结构如下所示:

   elements = [
{name: 'johny', 
    category1: 'cat1',
    category2: 'cat2a'
},
{name: 'cindy', 
    category1: 'cat1',
    category2: 'cat2b',
    category3: 'cat3'

}]; 

我希望 d3 树看起来像这样:

        cat2a - johny
        /       
   cat1
        \
        cat2b - cat3 - cindy

目前我得到了这个:

        cat2a - undefined - johny
        /       
   cat1
        \
        cat2b - cat3 - cindy

Answer 1

编辑:

您可能无法使用 d3.nest() 来完成此任务，但您应该能够通过迭代每个元素的每个类别并构建子数组来构建适当的结构。这是一个jsfiddle: https://jsfiddle.net/b1s65ydL/8/

var root, element, key, child, j, i, catHash;
var categoryPropertyNames = [
    'category4',
    'category3', 
    'category2', 
    'category1'
]; //in descending order
var nodeByName = Object.create(null); //dictionary to hold category nodes

root = {name: 'root', children: []};
for ( j = 0; j < elements.length; j++ ) {
    element = elements[j];
    child = element;
    for ( i = 0; i < categoryPropertyNames.length; i++ ) {
        key = categoryPropertyNames[i];
        if ( !element.hasOwnProperty(key) ) {
           continue;
        }
        catHash = element[key] + '-' + key;
        if ( nodeByName[catHash] === undefined ) {
            nodeByName[catHash] = {name: element[key], children: []}; 
        }
        var node = nodeByName[catHash];
        //add child to the array if is not already there
        if ( node.children.indexOf(child) == -1 ) {
            node.children.push(child);
        }
        child = node;
    }
    //child is now either the first category, or the element itself
    if ( root.children.indexOf(child) == -1 ) {
        root.children.push(child);
    }
}    

//d3 should be able to take it from here
var nodes = tree.nodes(root).reverse();    

我还发现: http://learnjsdata.com/group_data.html提供帮助。