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);