如何使用 CSS 在 D3.js 中将树形图居中？答案

【问题标题】：How to center a tree diagram in D3.js using CSS?如何使用 CSS 在 D3.js 中将树形图居中？
【发布时间】：2020-11-04 09:00:56
【问题描述】：

我正在使用 D3.js 制作层次树图。但我似乎无法弄清楚如何以我想要的方式设置树的x 和y。目前如下图所示，它是垂直发射的。

编辑：

它在我的 27' 屏幕显示器上工作，但在我 13' 的笔记本电脑上看起来像这样

我正在使用这个example 来尝试让它看起来一样。

#root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: center;
  justify-content: center;
  height: 100vh;
  padding: 0 50px 150px;
  text-align: center;
  box-sizing: border-box;
}

【问题讨论】：

你能分享一个带有完整示例的 JSFiddle 吗？
这是一个 CSS 问题。我在更大的屏幕上尝试了它，它只需要编辑它以适应我的屏幕，因为大约有 60 个节点。

标签： javascript css d3.js flexbox

【解决方案1】：

假设这不是 CSS 的问题，那是我的错误。

我对 CSS 不太熟悉，但以下将填充从 padding: 0 50px 150px 更改为 padding: 400px 50px 的修复工作有效。

【讨论】：