javascript - d3.js 树状图的自定义面包屑 UI

Question

我正在使用 d3 树图布局。代码在链接https://codesandbox.io/s/d3-treemap-wfbtg?file=/src/treegraph.js中。d3 treemap 的当前面包屑如下所示。

我需要定制这样的一个。

在上图中，单击 A2 节点时，面包屑应为A > A2，单击 B1 节点时应为B > B1。分类在分层 json 数据中。在json中，节点的名称是B-B1，A-A1，B-B2，所以B1和B2属于B类，A1和A2属于A类。是否可以自定义d3树形图的面包屑。

Answer 1

为了合并自定义面包屑，您需要修改代码中的名称方法。

我已经更新了代码并在您的代码中更改了名称方法（第 77 行），如下所示：

const name = d => {
  let labelstring = "";
  const ancestors = d.ancestors().reverse();
  if (ancestors.length === 1) {
    labelstring = ancestors[0].data.name;
  } else if (ancestors.length > 1) {
    labelstring = ancestors
      .slice(1)
      .map(d => d.data.name.split("-").join(" > "))
      .join(", ");
  }
  return labelstring;
};

你可以检查并让我知道它是否是你需要的。

工作代码行：https ://codesandbox.io/s/d3-treemap-kkrho?file=/src/treegraph.js

谢谢！