Question

我正在d3.js（第5版）中制作组织结构图。我希望它尽可能地动态，所以当有更改时，我可以轻松地更新输入文件并将其重新呈现。我在下面和this CodePen中都有一个简化的reprex，其中我对输入数据进行了硬编码。

以下是我要实现的目标的简要说明：

GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' REQUIRE NONE; FLUSH PRIVILEGES; QUIT;是代表可视化的层次结构部分的对象数组：
- 一个const tree，
- 3位经理和
- 6个项目
ROOT是代表人员的对象数组。
const staff和searchObj在findIndicesOfMatches中工作，用代表他们的对象替换项目中员工的姓名（以及我将继续开发该组织时将使用的属性）图表）
我确定树的布局并渲染树。父节点可以根据需要扩展以覆盖其子节点。
我遇到的最后一步是，我要遍历叶节点，添加.map()，并基于{{1}渲染其他g }属性。我当前正在尝试在节点上使用rect，检查以确保它们是叶子（staff），附加一个.each()，并在项目中构建人员的表示形式。

我不确定的是如何将绑定数据更改为if(!d.children)属性。到目前为止，我还没有尝试过任何方法。目前，即使对于没有人员的项目，我在g中也只有一个staff。

外观如何：

应该是什么样子

有什么想法吗？

rect：

index.html：

<!DOCTYPE html>
<html>

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="./org-chart.js"></script>

  <style>
    body {
      font-family: 'Helvetica';
      color: #666;
      font: 12px sans-serif;
    }
  </style>
</head>

<body>
  <div id="viz"></div>
</body>

</html>

Answer 1

您需要将.data([staff])替换为.data(staff)。 staff已经是一个数组。如果您使用[staff]，它将绑定到 one 元素数组，该元素本身就是一个数组。这就是为什么您只看到一片叶子的原因。

d3.select(this)
  .append('g')
  .selectAll('rect')
  // use staff instead of [staff]
  .data(staff)
  ....

查看经过修改的CodePen

矩形的大小仍然存在问题（最后一个不在svg之内），但它应该使您位于正确的路径上。

d3.js：更改（下钻）selection.each（）中绑定的数据

1 个答案: