0

Не теряю надежду, недавно задавал вопрос с отрисовкой бинарного дерева. вот что то похожее но не выходит добавить дочерние элементы в дерево, помогите плиз с этим Вот код из прошлого вопроса

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%;
}

1 ответ 1

1

Каждый узел этого дерева имеет следующий вид:

{
  name : <имя, в роли значения узла>  // String, или другой примитив
  left : <левый наследник>            // Object
  right: <правый наследник>           // Object 
}

Наследники могут быть узлами той же структуры, либо null/undefined (что означает отсутствие наследника).
Если оба наследника узла отсутствуют, узел считается листом.

Сам объект tree является корнем.


Добавление дочерних узлов достаточно очевидно:

// предположим такое исходное состояние дерева
let tree = {
  name: '1',
  left: {                  // tree.left
    name: '2',
    left : { name: '4' },  // tree.left.left
    right: { name: '5' }   // tree.left.right
  },
  right: { name: '3' }     // tree.right
};

// добавление листа. левый наследник корня получает себе наследника (и перестает быть листом)
tree.right.left = { name: 'a' }; 

// добавление узла. правому наследнику корня добавляется правый наследник (узел с двумя листьями) 
tree.right.right = {
  name: 'x', 
  left : { name: '6' }, 
  right: { name: '7' }
}

Демо на JSbin.


Если литеральная запись по каким-то причинам не нравится, то можно написать класс вроде такого (пример возможно нерабочий - пишу без проверки, показывая только общий принцип):

function TreeNode(name) {
  this.name  = name; 
  this.left  = null; 
  this.right = null; 
}
TreeNode.prototype.assign = function(value, copy = true) {
  if (value instanceof TreeNode)
    this = copy ? Object.assign(this, value) : value; 
  else {
    if (value instanceof Object)
      throw new Error('Назначение объекта не являющегося экземпляром TreeNode'); 
    this = new TreeNode(value); 
  }
}
TreeNode.prototype.assignChildNodes = function(left, right, copy = true) {
  this.assign(left,  copy); 
  this.assign(right, copy); 
}

, и использовать так:

tree.right.left = new TreeNode('a'); 
let newNode = new TreeNode('5'); 
tree.right.right.assignChildNodes(new TreeNode('4'), newNode); 

let someNode = tree.right.right.left; 
someNode.assign(anotherNode);               // копирование узла. Пригодится для переноса узлов внутри дерева
someNode.left = new TreeNode('z'); 
someNode.right.assign(anotherNode, false);  // ссылка на другой узел. Вообще, такого делать не надо... но саму возможность, предусмотреть можно :)
5
  • не работает этот способ :/
    – user277573
    16 апр 2018 в 8:51
  • @kkkkkkkk, способ прекрасно работает: jsbin.com/pisesaxite/edit?js,output
    – yar85
    16 апр 2018 в 9:39
  • @kkkkkkkk, запятые проверьте в литеральной записи :) Если Вы бездумно копипастили из ответа и даже не посмотрели в консоль, то прихватили опечатку... в ответе я ее уже исправил. И еще, в демке на JSbin изменил стили линий, чтобы они не вылезали вниз (но стили вообще несущественны, разметка генерируется корректно).
    – yar85
    16 апр 2018 в 9:45
  • Прости, не мог раньше ответить, вообще да, все работает, спасибо большое, я так и не понял,почему у меня сразу не работало ничего, ввел с сайта, который ты кинул и все хорошо, спасибо еще раз
    – user277573
    16 апр 2018 в 18:32
  • @kkkkkkkk, главное что в итоге все заработало :) Если что-то будет рисоваться со сдвигом, то возьмите CSS из ответа в прошлом вопросе (я там добавил еще одно мелкое исправление в позиционировании. Демка на JSbin - без этого фикса).
    – yar85
    16 апр 2018 в 19:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.