Javascript Treemap 的 Div 与 SVG

Question

我需要一个类似于 plotly 的树形图： https://plotly.com/python/treemaps/ 对于反应应用程序， 它支持缩放功能，因此可以探索多个图层，而无需一次显示所有图层。 我不能使用 plotly，因为它似乎违反了 CSP，而且我找不到任何其他库，以及一个对我有用的示例。

我知道考虑编写自定义树形图组件。我尝试的每个树形图都是 SVG 构建的。但是，我没有使用 SVG 的经验，并且更喜欢使用 div 元素构建树形图。由于我找不到任何使用 div 元素的解决方案，我想知道是否有任何我不知道的陷阱。

我知道过多的 DOM 元素可能是个问题。但我不需要一次显示超过 2 层，它们永远不会超过 200 个元素。

Answer 1

这个例子是可以形成一棵树的东西的开始。它是由基于对象data的div组成的。

我开始设计它的样式，但这需要一些实验和结构化...

const data = {
  '1': {
    '1.1': {
      '1.1.1': {}
    },
    '1.2': {}
  },
  '2': {
    '2.1': {},
    '2.2': {
      '2.2.1': {},
      '2.2.2': {}
    }
  }
};

const tree = document.getElementById('tree');

const insertchildren = (parent, obj, level) => {
  Object.keys(obj).forEach(key => {
    let child = document.createElement('div');
    child.setAttribute('class', `node v${Object.keys(obj[key]).length} l${level}`);
    let title = document.createElement('div');
    title.setAttribute('class', 'title');
    title.textContent = key;
    child.appendChild(title);
    parent.appendChild(child);
    insertchildren(child, obj[key], level + 1);
  });
};

insertchildren(tree, data, 1);

div#tree {
  display: flex;
  flex-direction: row;
}

.l1 {
  flex-direction: column;
}

.l2 {
  flex-direction: row;
}

.l3 {
  flex-direction: column;
}

div.node {
  display: flex;
  padding: 2px;
  border: solid thin black;
  margin: 2px;
  box-sizing: border-box;
}

.title {
  width: 100%;
}

.v0 {
  height: 100px;
}

<div id="tree" class="v2"></div>