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

【问题标题】：D3.js Tree layout canvas resizeD3.js 树布局画布调整大小
【发布时间】：2013-08-14 04:33:53
【问题描述】：

这是我使用 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 专家。

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

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

【问题讨论】：

问题是，nodes 被附加到一个已经存在的 canvas... 如果它 exists 它有一定的size。我认为为了让您能够做到这一点，您必须遍历整个树并计算结构中的级别数，然后相应地调整 SVG 区域的大小......但是，您是否考虑过滚动/平移该区域揭示感兴趣的部分？如果需要，您甚至可以放大/缩小到某个区域。我每次都以这种方式解决了有关大型可视化的问题...
如果你想看看它，这可能会有所帮助：stackoverflow.com/questions/17405638/…
首先，感谢您的回复:)。我查看了它并将其合并到我的代码中。尝试了缩放和平移示例，但由于树很大，因此很烦人。（您可能想滚动到某个节点，但它会缩小 :( ）。此外，感觉有点小故障（可能是由于树中有大量节点）。
即便如此，缩放可能会对您有所帮助...考虑计算树的深度（即层数），然后使用该值动态确定比例缩放功能的因素。然后，使用该因子对整个 SVG 区域应用缩放，这样您就可以重新缩放整个图形以适合您的 canvas，无论其大小如何。关于鼠标滚轮缩放而不是滚动，我认为 API 中有一个选项可以禁用鼠标滚轮缩放，但不确定...
我刚刚发现这似乎很好地解决了这个问题stackoverflow.com/questions/13103748/…

标签： javascript canvas d3.js

【解决方案1】：

希望这对某人有所帮助。

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

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

对于宽度：最大 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})`)

好吧，祝你编码愉快！

【讨论】：

【解决方案2】：

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

【讨论】：