D3 JS 布局树连接到 CrossFilter答案

【问题标题】：D3 JS Layout Tree connected to CrossFilterD3 JS 布局树连接到 CrossFilter
【发布时间】：2013-03-02 00:27:18
【问题描述】：

如何将 D3.JS Tree Layout 与 CrossFilter 连接起来？

假设我有this example tree。然后我提取一个树节点列表，作为 CrossFilter 的输入数据集。

// Compute the new tree layout.
var nodes = tree.nodes(root);
var data = crossfilter(nodes);
var bySize = data.dimension(function(d) { return d.size; });

然后我想根据大小进行过滤，并根据此过滤动态更新树。关于我应该如何更新树数据源的任何想法？

是否需要编写函数返回到原来的输入树数据结构，如：

treeJson = graph2tree(filteredNodes, filteredEdges)

或者有没有更好的方法？

【问题讨论】：

标签： javascript d3.js nvd3.js crossfilter dc.js

【解决方案1】：

由于它是一棵树，您可以使用每个元素的完整路径作为维度键。那么任何分支都是维度的连续范围。

例如这会自动分类到分支中： A.1 A2 A.3 B.1

然后将另一个维度键入大小，并使用 treeDim.top(Infinity) 或 .group() 获取您的项目。它们不在树形结构中，但至少它们是有序的，您可以使用 d3.nest 将它们变成树。

...如果您还想过滤分支，您已设置好，只需将范围设置为 [A,B)

【讨论】：