Question

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

Generate (multilevel) flare.json data format from flat json

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

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

我看到了这个：

Dynamically resize the d3 tree layout based on number of childnodes

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

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

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

注意：当我说画布时，我指的是绘制树的区域而不是“画布”。我不熟悉这个术语，所以请仔细阅读。

Answer 1

我遇到了类似的问题，现在我找到了解决方案。检查此链接。 D3 collapsible tree, node merging issue

Answer 2

希望这有助于某人。

我也面临类似的问题，使用耀斑树代码作为我构建的基础，建议的链接似乎没有解释节点结构的很多变化？我有很多树可以显示动态数量的节点和结构。这个解决方案对我有用：

关于高度：在观察每个节点的平移偏移之后，我了解到d.x（vs d.y，因为树被翻转）是从根节点的偏移，其中根上的节点变为负，而下面的节点变为正。所以，我＆＃34;计算＆＃34;每次附加一个节点时，两个方向上的最大偏移量，然后使用该信息，调整画布高度和视图转换（根的起始点）。

宽度：最大d.depth *（代码使用的y长度归一化）+边距

＆＃13;

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})`)

＆＃13;

嗯，祝福和编码愉快！

D3.js树布局画布调整大小

2 个答案: