Style drawNode() with Attributer

[tuckergordon]

Is it possible to style nodes created with drawNode() with the specified attributer? For example:

const dot = `
digraph {
  a -> b
  a -> c
}`;

const graphviz = d3.select("#graph")
  .graphviz(false)
  .attributer(function(d) {
    if (d.tag == "ellipse") {
        d.attributes.fill = "red";
      }
    })
  .renderDot(dot);

graphviz.drawNode(100, 0, 'New node')

I would expect the newly drawn node to have fill: red, but that is not the case. The docs specify that you can specify styles using DOT attributes, but it would be nice to to both a) only have to specify node styles once and b) be able to use CSS to style drawNode() nodes.

[magjac]

Is it possible to style nodes created with drawNode() with the specified attributer?

No. The attributer is only used when rendering from DOT source. You need to specify the attributes as the fourth argument to drawNode() like so:

graphviz.drawNode(100, 0, 'New node', {fill: "red"})

The docs specify that you can specify styles using DOT attributes

No, they specify that you can specify Graphviz attributes. One such attribute is style, but it's not the HTML or SVG style attribute. It's a Graphviz specific attribute.

a) only have to specify node styles once

I guess you could write a common function for generating the attributes both for the attributer and for the attributes object argument to drawNode()

b) be able to use CSS to style drawNode() nodes.

I'm not sure what you mean here. You can use the Graphviz class attribute and specify an external stylesheet with the stylesheet attribute.

It's easy to get confused if the distinction between these concepts are not made:

1. Graphviz attributes
2. HTML/SVG attributes
3. CSS style properties

it would be nice to to both a) only have to specify node styles once and b) be able to use CSS to style drawNode() nodes.

Node style is a Graphviz specific attribute. CSS style properties are something else.

Apologies if you know all this already. Perhaps I'm just not understanding what you want.

[tuckergordon]

Yeah I'm sorry, not my best-worded question. Everything you've listed here makes sense and I think can be found in the docs. After thinking through my use-case a bit more, I think I can better explain what I'm running into:

• There are certain styles that can only be done with CSS, and not with Graphviz attributes. For example, changing the stroke of the arrowhead (<polygon>) but not the arrow's line (<path>).
• While I would ideally use an external stylesheet to style my graph, polygons styled with external CSS flicker during graph transitions. I think it may apply to <path>s as well but less certain about that. I didn't see any open issues about this, so wondering if this is a bug that you're aware of?
• Setting the inline style properties (and svg attributes) within the attributer avoids this problem. However, that leads me back to the issue I started with, because the attributer doesn't apply to drawNode().

I made a Codepen that hopefully demonstrates what I'm dealing with. I think if external CSS styles didn't result in flickering then the rest wouldn't matter, so maybe that's the root of my issue

[magjac]

I think it may apply to s as well ...

Typo?

[tuckergordon]

Yup, sorry - markdown removed my text that looked like HTML elements. Fixed it

[magjac]

Thanks so much for the Codepen. It helps a lot to see something in action.

1. The first point seems to be possible to solve with something like color="black;0.99:red". See this example. I don't know why it works though.
2. The second point is not a bug, but an unfortunate consequence of the principles of operation. External CSS is not considered at all since it's not part of the data that can be extracted from the generated SVG. AFAIU, it's not until that SVG is rendered some program (typically a browser) which applies the external stylesheet, that those style properties can be known. It might be possible to extract it after the transition has started, but it doesn't seem so from a modified slower Codepen i did.
3. It may be possible to utilize the attributer also in drawNode(). I have to think about this some more.