Помогите отрисовать бинарное дерево

171

13 апреля 2018, 16:14

Не работал с json форматами и подобным, задание отрисовать дерево бинарное c входными данными типа

{
  data: { id: 'a', name: 'q', left: true, right: false }
},
{
  data: { id: 'b', name: 'w', left: false, right: true }
},

как то так, в задании формат подачи данных не указан, может быть в любом виде не обязательно в json, можно и js объектами.

выйти должно такое, но не обязательно все это сильно верстать, буду рад если подкинете логику, я постараюсь доделать

Answer 1

Набросал примерный вариант на флексбоксах.
С линиями - надеюсь, самостоятельно разберетесь :) Там нужно применять через трансформ повороты, транслейт, и прочую жуть... в которой я далеко не спец.

const $d = document; 
 
function addNodeFromObj(obj, parentEl = $d.body) { 
  if (!obj) 
    return; 
  let el = $d.createElement('div'); 
  el.classList.add('node'); 
  el.insertAdjacentHTML('beforeend', ` 
    <span class="name">${obj.name}</span><div class="container"></div> 
  `); 
  parentEl.appendChild(el); 
  if (obj.left || obj.right) { 
    el = el.querySelector('.container'); 
    addNodeFromObj(obj.left, el); 
    addNodeFromObj(obj.right, el); 
  } 
  else 
    el.classList.add('leaf'); 
} 
 
let tree = { 
  name: '1', 
  left: { 
    name: '2', 
    left : { name: '4' }, 
    right: { name: '5' } 
  }, 
  right: { 
    name: '3', 
    left : { name: 'x' }, 
    right: { name: 'y' } 
  } 
}; 
addNodeFromObj(tree);

html,  
body { 
  margin: 0; padding: 0; 
  font: 16px sans-serif; 
} 
 
.node { 
  position: relative; 
  flex: 1 1 45%; 
  text-align: center; line-height: 2em; 
} 
.node:before { 
  content: ''; 
  display: block; 
  width: 50.5%; height: calc(35% - 1em); 
  position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%, -150%); 
  border: 1px solid #000; border-bottom: none; 
  z-index: -1; 
  border-radius: 100% 100% 0 0; 
} 
.node.leaf:before { border: none; } 
body > .node { width: 100%; margin-top: 20px; } 
 
.node .container { 
  display: flex; 
  flex-wrap: nowrap; justify-content: center; 
  margin: 2em 0; 
} 
 
.node > span { 
  display: inline-block; 
  width: 2em; height: 2em; 
  background-color: #fff; 
  border: 1px solid #000; border-radius: 50%; 
}