CODEWITHSUNDEEP
javascriptd3.js
Vatsal
Vatsal

Reputation: 2128

custom html boxes in tree layout with d3.js

enter image description hereI have a requirement where I have to develop a tree layout similar to what is given by d3.js tree layout. But I want html boxes with custom content rather than just nodes. I have spent lot of time trying to find if its possible with d3.js but I am stuck at this point of time and unable to proceed.

The data will be dynamic

It does not have to be d3.js if there are any other viable solution/framework available. But the functionality expected is similar to what is provided by d3 ie- expanding, collapsing nodes.

Any pointers will be highly appreciated.

Upvotes: 2

Views: 1839

Answers (1)

Damien Fayol
Damien Fayol

Reputation: 958

What you want to do can be achieved by using ForeignObject.

The basic scenario is this one:

<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml">
  <body xmlns="http://www.w3.org/1999/xhtml">
    <p>Some text</p>
  </body>
</foreignObject>

Here is a more complete example : http://jsfiddle.net/thudfactor/bK6VD/

You use d3 to generate the foreignObject content based on your data.

Upvotes: 2

Related Questions