问题
I 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.
回答1:
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.
来源：https://stackoverflow.com/questions/35644344/custom-html-boxes-in-tree-layout-with-d3-js