d3 CSV中的Zoomable Treemap

Question

我是D3的新手,我发现它非常谦卑.

我的目标是从CSV文件制作树形图.我想使用CSV格式,因为我将使用电子表格中的值,并且我很容易以这种方式保存文件.

我试图以分层格式存储数据,如下所示(hier.csv):

parent,child,value
Homer Simpson,Bart,20
Homer Simpson,Lisa,14
Homer Simpson,Maggie,6
Peter Griffin,Chris,19
Peter Griffin,Meg,12
Peter Griffin,Stewie,9

我正在使用这个Zoomable Treemap示例.

我希望树可以任意深入,即如果Bart在我的例子中有孩子,并根据姓名积累父/子关系.

我为Sankey Diagrams找到了一个很好的例子,但我没有找到Zoomable Treemaps的等价物.

有没有办法在Bostock的示例的第124和126行之间插入一些代码,以便为Zoomable Treemap正确格式化我的数据？(我可以更改CSV的布局,但希望保留CSV格式).像这种方法使用的东西nest(),但显然这不起作用:

d3.csv("./hier.csv", function(hier) {

  var root = { 
    "name": "myrootnode",
    "children": d3.nest()
        .key(function (d) { return d.parent; })
        .key(function (d) { return d.child; })
        .entries(hier)
  };

  initialize(root);
  accumulate(root);
  layout(root);
  display(root);
  //etc...

我看到了一些示例和StackOverflow问题,这些问题解决了这个问题的一些部分,但却未能将它们端到端地整合在一起.我一直在研究和黑客无济于事.我会欢迎一些帮助.谢谢!

骗子在这里

http://jsfiddle.net/KXuWD/

小提琴笔记:

• 我正在第90行附近寻求帮助,评论显示
• 我设置了一个内联变量来保存flare.json的简化副本
• 我计划在现实生活中将数据保存在一个单独的文件中,但对于JSFiddle,它必须是内联的; 当然,如果我能找出主要逻辑,这将很容易适应回单独的数据文件.
• 此示例似乎不适用于D3版本3.0.4,这是JSFiddle的当前内置版本.我为这个例子导入了v2.x,因为这适用于Bostock的例子.这是一个潜在的独立问题......

更新

我克服了部分问题.我的想法并不是太过分了nest(),但我没有正确更新我的存取器.这是一个非常草率的看起来很有用的东西:http: //bl.ocks.org/maw246/7303963

我的例子与Bostock之间的主要区别:

• 使用后,CSV会在加载后嵌套d3.nest().这会将其强制转换为分层JSON对象格式
• 许多(如果不是全部)对"children"的引用已被"值"替换,因为d3.nest()使用key和values属性构建树而不是Treemap的预期name和children属性.该value属性用于块大小调整,保持不变.

剩余的问题

• 它不会任意深入.我正在考虑重新组织我的数据以更好地利用该d3.nest()功能的方法,但还没有尝试过.
• 孩子的名字正在出现undefined.我确信我只是忽略了一些简单的东西,但我主要关心的是让核心功能正常工作,所以当我有一分钟的时候,我会对这件作品进行一些修改.

注意:我仍在寻求帮助,采用干净且惯用的方法来做到这一点,包括如何最好地组织CSV以进行分层嵌套到任意深度的建议!

Answer 1

未经测试，可能不太惯用（javascript 不是我的事），但可能会让你走上正轨。我使用它是underscore.js因为我很懒，如果你关心的话，可以使用本机循环来实现。

d3.csv(csv_url, function(error, data) {
    var root = {
        name: "Everybody",
        value: 0,
        children: []
    };

    var parents = {};
    _.each(data, function(row) {
        var child = {
            name: row.child,
            value: row.value,
            children: []
        };
        if(parents[row.parent]) {  // parent seen already
            parents[row.parent]['children'].push(child);
            parents[row.parent]['value'] += row.value;
        } else {                   // new parent
            parents[row.parent] = {  
                name: row.parent,
                children: [child],
                value: row.value
            }
        }
        root.value += row.value;
    });

    root.children = _.values(parents);
    ...