来自 CSV 的 d3 可缩放树形图

Posted 2023-02-22

【中文标题】来自 CSV 的 d3 可缩放树形图

【英文标题】：d3 Zoomable Treemap from CSV

【发布时间】：2013-11-14 13:46:42

【问题描述】：

我是 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 example。

我希望树任意深，即如果 Bart 在我的示例中有孩子，并根据名称相应地累积父/子关系。

我找到了great example of this for Sankey Diagrams，但我还没有找到可缩放树形图的等价物。

有没有办法在Bostock's example 的第 124 行和第 126 行之间插入一些代码，以便为可缩放树形图正确格式化我的数据？ （我可以更改 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...

我看到了一些示例和 *** 问题，这些问题解决了其中的点点滴滴，但无法将它们端到端地结合在一起。而且我一直在研究和破解无济于事。我会欢迎一些帮助。谢谢！

在这里提琴

http://jsfiddle.net/KXuWD/

小提琴笔记：

我正在 #90 行附近的 cmets 指示处寻求帮助 我设置了一个内联变量来保存flare.json 的精简副本 我计划在现实生活中将数据保存在一个单独的文件中，但对于 JSFiddle，它必须内联；当然，如果我能弄清楚主要逻辑，这将很容易适应单独的数据文件。 此示例似乎不适用于 D3 版本 3.0.4，它是 JSFiddle 的当前内置版本。我为示例导入了 v2.x，因为这适用于 Bostock 的示例。这是一个潜在的单独问题...

更新

我克服了部分问题。我认为nest() 是必要的，但我没有正确更新我的访问器。这是一个非常草率的看一些最有效的东西： http://bl.ocks.org/maw246/7303963

我的示例与 Bostock 示例之间的主要区别：

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

仍然存在的问题

它不会随意深入。我正在考虑一种方法来重组我的数据以更好地利用d3.nest() 功能，但还没有尝试过。 孩子的名字出现在undefined。我确信我只是忽略了一些简单的事情，但我主要关心的是让核心功能正常工作，所以我会在有时间的时候稍微破解一下。

注意：我仍在寻求一种简洁且惯用的方法来执行此操作，包括有关如何最好地组织 CSV 以实现任意深度的分层嵌套的建议！

【参考方案1】：

在调查树形图的使用时，我也遇到过类似的挫败感。 来自服务器的数据是扁平表格样式的数据，例如：

var myData = [ "thedad": "Homer Simpson", "name": "Bart", "value": 20 ,
 "thedad": "Homer Simpson", "name": "Lisa", "value": 14 ,
 "thedad": "Homer Simpson", "name": "Maggie", "value": 6 ,
 "thedad": "Peter Griffin", "name": "Chris", "value": 19 ,
 "thedad": "Peter Griffin", "name": "Meg", "value": 12 ,
 "thedad": "Peter Griffin", "name": "Stewie", "value": 16 ,
 "thedad": "Bart", "name": "Bart Junior A", "value": 77 ,
 "thedad": "Bart", "name": "Bart Junior B", "value": 32 ];

然而，d3 treemap 需要它处理的 javascript 对象的分层格式。 经过繁琐的搜索，我在 d3 google 组中发现了 underscore.nest 的提及。 https://github.com/iros/underscore.nest

“Underscore.Nest 是 [下划线 js 库] 的扩展，用于 将平面数据转换为嵌套的树结构”。

使用这个库（同样，依赖 underscore.js）意味着你没有 求助于 d3.nest 并担心它产生的键/值数据格式。

工作示例 这是一个使用平面对象列表的树形图的工作示例 underscore.nest 已将其转换为 d3 treemap 期望的分层格式。 （没有 underscore.nest 的原始树形图来自 mbostock 的示例：http://bost.ocks.org/mike/treemap/）

http://jsbin.com/aGIvOnEH/3

root = _.nest( myData, "thedad");
root.name = "TV Dads";

希望这是有用的。

【讨论】：

jsbin例子有问题。荷马辛普森是巴特的父亲，但巴特与他自己的孩子分开放映。在荷马辛普森的领导下，巴特被列入名单，但没有孩子。看看myData，我们的预期是巴特的孩子应该是荷马辛普森的孙子，我们应该能够通过这种方式点击树状图。

【参考方案2】：

未经测试，可能不是很惯用（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);
    ...

【讨论】：

感谢您的意见，保罗。该解决方案是否超出了一个层次？我没有尝试过，因为正如你所说，我正在追求更惯用的东西，正如我今天早上的更新所示。

抱歉，这仅适用于提供的数据样本（不是“Abe Simpson”）。我没有时间发布更通用的解决方案，但应该不难将逻辑抽象为递归函数。

【参考方案3】：

从mg1075's answer，我看到myData 是自引用数据，这意味着一行中的孩子成为另一行的父母并拥有自己的孩子。这导致了一种深度可变的层次结构，并且不能仅通过查看一行来计算深度；程序需要遍历整个事物并建立关系。 d3.nest() 对此不起作用.. 它需要整个祖先一直排到每一行本身的顶部。

我仍然需要探索 underscore.js，但 mg1075 的 jsbin 工作示例表明它实际上并没有解决问题：Bart 在树形图中靠近 Homer Simpson，尽管是 Homer Simpson 的孩子，但他的孩子在那里;他也在荷马辛普森手下（让他成为自己的叔叔：P），但在他自己的名下没有任何孩子（所以巴特的克隆叔叔偷了他的孩子，可怜的荷马辛普森没有孙子）。所以基本上孙子不被认出来。

我已经发布了一个问题，然后使用名为 DataStructures.Tree 的库在这里找到了这种可变深度分层数据可视化的解决方案。我认为这可能会有所帮助：

https://***.com/a/27756744/4355695