Did not work with json formats and the like, the task is to draw a binary tree with input data of type

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

Something like this, in the task, the format of the data feed is not specified, it may not be necessary in any form in json, it is possible and js objects. enter image description here

this should come out, but it is not necessary to impose all this strongly, I will be glad if you give up logic, I will try to finish

Closed due to the fact that the essence of the question is incomprehensible to the participants Igor , Air , 0xdb , AivanF. , Kromster Apr 16 '18 at 10:02 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    to know what these left Wright means and where the tree-like format is in the very listed objects ... - MedvedevDev
  • @MedvedevDev So there can be anything, I just thought that Wright is where the direction will go, and so on, I just can't figure out how to implement it, that's why I asked here - user277573
  • a large part of the solution of the problem depends on the data format ... your given version and structure say [ [ [] [] ] [ [] [] ] ] are completely different things - MedvedevDev
  • @MedvedevDev I just said, as I imagine, since I do not know how to do it better and generally how to do it, I came to so - user277573
  • "not necessarily in json, it is possible and js objects" - Jason is the js-object :) More precisely, the form of its presentation. - yar85 5:58 pm

1 answer 1

Sketched a rough version on flexboxes.
With the lines - I hope you will figure it out yourself :) There you need to apply through turns transforms, translate, and other horror ... in which I am far from special.

 const $d = document; function addNodeFromObj(obj, parentEl = $d.body) { let el = $d.createElement('div'); el.classList.add('node'); if (!obj) { el.classList.add('leaf'); parentEl.appendChild(el); return; } 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(40px + 2em); position: absolute; top: 0; left: 50%; transform: translate(-50%, 20px); 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%; }

upd .:

  • Corrected line styles, now the lines should not crawl beyond the lower boundary of the circles of the child nodes.
  • Fixed incorrect positioning of nodes without neighbors.