Пользовательский интерфейс хлебных крошек для d3. js treemap

Question

Я работаю с макетом карты дерева d3. Код находится по ссылке https://codesandbox.io/s/d3-treemap-wfbtg?file= / src / treegraph. js. Текущая навигационная цепочка древовидной карты d3 выглядит так, как показано ниже.

I need to customise to the one like this. введите описание изображения здесь

На изображении выше при щелчке по узлу 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

Спасибо!