1

这是我使用 d3.js 构建可折叠树布局的努力的延续。

从平面 json 生成（多级）flare.json 数据格式

布局看起来像：（http://bl.ocks.org/mbostock/raw/4339083/）大约有 3k 个节点，一些节点的深度在 25 左右。我需要设置的画布的当前大小是 8000px 宽度和 8000px高度，以便所有节点都可见，当渲染的树级别数为 2 或 3 时，我知道这是不合理的。此外，我打算使此代码可与其他树重用，这些树可能会根据数据源的大小而变小/变大（json 文件）被选中。

所以我想知道是否可以相对于屏幕上显示的节点位置/节点数调整画布大小。这样，代码将更加系统化和适应性强。

我看到了这个：

根据子节点的数量动态调整 d3 树布局的大小

但这会调整树的大小，如果您可以想象在具有大约 3k 个节点的树的情况下，这会使其难以阅读和理解。

我知道这甚至可能与 d3.js 无关，但我标记了它以解释我的问题并请来可能面临类似情况的 d3 专家。

我还试图根据我的标准过滤掉无信息的节点，以便呈现比实际数据更少的节点。（我知道我会遇到较大树的性能问题）。任何帮助将非常感激。

注意：当我说画布时，我指的是绘制树的区域，而不是“画布”。我不熟悉行话，所以请相应地阅读。

4

2 回答 2

2

我遇到了类似的问题，现在我找到了解决方案。检查此链接。D3 可折叠树，节点合并问题

于 2015-11-19T13:15:23.747 回答
2

希望这可以帮助某人。

我也遇到了类似的问题，使用耀斑树代码作为我正在构建的基础，建议的链接似乎没有考虑到节点结构的很多差异？我有许多树要显示动态数量的节点和结构。这个解决方案对我有用：

关于高度：观察每个节点的平移偏移量后，我了解到 dx（vs dy，因为树被翻转）是从根节点的偏移量，根节点上方的节点为负数，而根节点下方的节点为正数。因此，每次添加节点时，我都会“计算”两个方向的最大偏移量，然后使用该信息调整画布高度和视图平移（根的起点）。

对于宽度：max d.depth *（代码使用的y长度标准化）+边距

let aboveBount = 0
let belowBound = 0
let maxDepth = 0


nodeEnter.each( (d) => {
  if( Math.sign(d.x) === -1 &&  d.x < boundAbove) {
    boundAbove = d.x
  } 
  if( Math.sign(d.x) === 1 &&  d.x > boundBelow) {
    boundBelow = d.x
  }
  
  if( d.depth > maxDepth){
    maxDepth = d.depth
  }

})

const newHeight = boundBelow + Math.abs(boundAbove) + nodeHeight*2 + margin.top*2


svg.style('height', newHeight)
svg.style('width'. maxDepth*180 + margin.left*2) 
//180 was the amount set to normailze path length

svg.attr('transform', `translate(${margin.left}, ${Math.abs(boundAbove) + margin.top})`)

好吧，最好的祝愿和快乐的编码！

于 2018-04-21T00:10:29.900 回答