how to add fill color in definition? about dagre-d3

[cpettitt]

Currently dagre-d3 doesn't have any special mechanism for describing a graph's style. This is something I definitely want to add, but haven't had time to think through in great depth. For the moment you can do this:

    g.addNode("review", { label: "Review", style: "fill: red" });

    var renderer = new dagreD3.Renderer();
    var oldDrawNode = renderer.drawNode();
    renderer.drawNode(function(graph, u, svg) {
      oldDrawNode(graph, u, svg);
      svg.select("rect").attr("style", function(u) { return g.node(u).style; });
    });
    renderer.run(g, d3.select("svg g"));

[cjsoftuk]

@cpettitt - I too would welcome this feature, and am struggling to make the example code you gave work. The error I get is "Object # has no method 'drawNode'". I'll have an experiment and see if I can make this work.

[cpettitt]

The API changed slightly in dagre-d3. This should work:

    g.addNode("review", { label: "Review", style: "fill: red" });

    var renderer = new dagreD3.Renderer();
    var oldDrawNodes = renderer.drawNodes();
    renderer.drawNodes(function(graph, svg) {
      var svgNodes = oldDrawNodes(graph, svg);
      svgNodes.select("rect").attr("style", function(u) { return g.node(u).style; });
      return svgNodes;
    });
    renderer.run(g, d3.select("svg g"));

[cjsoftuk]

Thanks Chris,

I just about figured that out ~2-3 hours ago (and then got lost in a lot
of other Javascript I'm writing!).

I have to say that being able to do that is actually quite elegant - and
my personal opinion is that if people want to do fancy things with their
dagre-d3 graphs, they should implement it in a similar way to your example.

Regards,

Chris

On 11/01/14 16:28, Chris Pettitt wrote:

The API changed slightly in dagre-d3. This should work:

| g.addNode("review", { label: "Review", style: "fill: red" });

 var renderer = new dagreD3.Renderer();
 var oldDrawNodes = renderer.drawNodes();
 renderer.drawNodes(function(graph, svg) {
   var svgNodes = oldDrawNodes(graph, svg);
   svgNodes.select("rect").attr("style", function(u) { return g.node(u).style; });
 });
 renderer.run(g, d3.select("svg g"));

|
|

—
Reply to this email directly or view it on GitHub
#13 (comment).

[evangoer]

Thank you for the code example Chris! FWIW, it would be very nice if dagre-d3 had some sugar for adding styles or classes to nodes & edges (i.e., if adding a 'class' or 'style' property to the config object "just worked").

[jbaber]

Is there a similar readable trick for styling different edges differently? My actual use case is a family tree with mother and father relations colored differently.

[cpettitt]

As of v0.2.7 you can apply styles to nodes, node labels, edges paths, and edges. Documentation yet to be completed, but you can take a look at the interactive-demo to get a sense for how it works.

[jbaber]

Thank you!

[steren]

I would also like to ability to add a class, to style using CSS. It doesn't seem to be supported, is it?

+1, it would be interesting to override the style by using a class like g.addNode(null, {class: "ClassA". useDef: "def-N2"});

@steren a workaround...

            var oldDrawNodes = renderer.drawNodes();

            renderer.drawNodes(function(graph, svg) {

                var svgNodes = oldDrawNodes(graph, svg);

                svgNodes.select("rect").attr("class", "classA classB");

                return svgNodes;
            });

[cpettitt]

I could take this as a pull request, but I don't have cycles to add it myself right now. It shouldn't be a lot of work to add.

[SmruthiBhat]

can a node created using addNode function be made collapsible?

Thanks.