D3-like html tree

Question!

I'm using d3 to visualize tree of nodes with the usual way. Like this https://bl.ocks.org/mbostock/4339083

But svg solution is not really compatible with angular's two-way data binding because there is a need to redraw (update) the d3's tree every time the model changes.

Now I'm looking for the solution to visualize a tree in the same way, but on html (+js). If there is any, please advice the library for that purpose.



Answers

There is the solution found - https://jsfiddle.net/6yrvy3cn/1/

.tree ul {
  padding-top: 20px;
  position: relative;
  vertical-align: top;
}

.tree li {
  display: inline-block;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  vertical-align: top;
}

Pure css code.



This video can help you solving your question :)
By: admin