Create circles instead of rectangles

[dipanghosh]

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.

[ErikGartner]

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

[vogloblinsky]

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".

[ErikGartner]

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.

[jeroensmeets]

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];
}