Search code examples
javascriptd3.jsdagre-d3

Change default node shape in dagre-d3


I'm using dagre-d3 to display directed graphs in a Javascript application, and its default node shape is a rectangle. I'd prefer ellipses, but it's not at all obvious to me if there's a programmatic way of changing the default (I'd rather not hack up NODE_DEFAULT_ATTRS in render.js, for example). Any suggestions? Thanks for your attention.


Solution

  • I did a little experimenting, and came up with an approach that doesn't seem too clumsy. Basically, I walked the graph's nodes and set their shapes before handing the graph off to dagreD3.render.

    var g = graphlibDot.read(treeData);
    g.nodes().forEach(function(v) {
        var node = g.node(v);
        node.shape = "ellipse";
    });
    var render = new dagreD3.render();
    var svg = document.querySelector('#graphContainer');
    render(d3.select("svg g"), g);