D3嵌套 - 级别不一致的数量

时间:2016-06-25 11:44:30

标签: javascript d3.js

我正在尝试以这样的方式嵌套我的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) }

我遇到的问题是,并非我的数据中的所有条目都分配了所有四个类别。其中一些只有category1和category2,所以在这种情况下我希望在一个链接上只有两个节点(在树形图上)。但是,这里发生的是,即使所有链接都没有分配所有类别,所有链接都会获得四级结构。如果我有一个只有两个类别(category1和category2)的集合,我会在正确的位置获得category1,类别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

1 个答案:

答案 0 :(得分:1)

编辑:

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

cordova run browser

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