Open dipanghosh opened 6 years ago
By using a custom nodeRenderer
callback that creates your html.
I'm not going to design your element for you but the callback should look something like this:
function nodeRenderer(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
let node = '';
node += '<div ';
node += 'style="height:100%;width:100%;" ';
node += 'class="' + nodeClass + '" ';
node += 'id="node' + id + '">\n';
node += textRenderer(name, extra, textClass);
node += '</div>';
return node;
}
Then inside create HTML looking like this: https://www.w3schools.com/howto/howto_css_circles.asp
Hi @ErikGartner same probem for me.
Your trick works fine, but the circle is rendered inside a rectangle...
Using nodeSize
function like that :
nodeSize: function(nodes, width, textRenderer) {
return [100, 22];
}
I got an error : Error: <foreignObject> attribute height: Expected length, "undefinedpx".
Hm, looks correct to me. Does it work when you don't specific the nodeSize
callback?
If not, then your error is not in nodeSize
but somewhere else.
I had the same error, I fixed it by setting the width and height to the nodes also:
nodeSize: function(nodes, width, textRenderer) {
_.map(nodes, function (n) {
n.cWidth = 100;
n.cHeight = 100;
});
return [100, 100];
}
Hi,
I wanted to show the nodes as circles instead of rectangles. Would you please let me know how can do this in dtree?
Thanks.