image node attribute that refers to dynamically generated SVG (data URL)?

I’ve been using the style="wedged" node attribute value to render nodes as pie charts.

The results are okay, but I’d like more functionality in the pie charts: for example, slice-specific tooltips. That’s not possible with the Graphviz-generated SVG: the resulting <path> elements for each slice don’t contain any attribute that identifies their field name.

So I’ve been considering alternative ways to render nodes as pie charts.

One idea is to dynamically, in the browser, create an SVG pie chart (the XML; the SVG “source”), and then specify that SVG as a data URL in the image node attribute.

So far, this is only an idea. I’ve only got as far as reading the Images section in the d3-graphviz documentation, and realizing I need to specify the image path—in my case, the data URL—in both an addImage call and the DOT.

I’m wondering whether that—the combination of addImage and image node attribute value—would even work for a data URL.

I’ll try it first thing tomorrow, but I thought I’d create this issue now to perhaps save me a day, in case someone responds overnight (I’m in Perth, Western Australia, UTC+8).

I’m thinking something like this:

digraph G {

hello [image="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KPHBhdGggZD0iTTUwLDNsMTIsMzZoMzhsLTMwLDIybDExLDM2bC0zMS0yMWwtMzEsMjFsMTEtMzZsLTMwLTIyaDM4eiIKZmlsbD0iI0ZGMCIgc3Ryb2tlPSIjRkMwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg=="]

}

where the original unencoded SVG is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,3l12,36h38l-30,22l11,36l-31-21l-31,21l11-36l-30-22h38z"
fill="#FF0" stroke="#FC0" stroke-width="2"/>
</svg>

(a five-pointed yellow star; a placeholder example until I decide what to use to generate bespoke pie chart SVG)

but I fear that addImage will barf at that long “path”.

I’ll report back tomorrow on my progress.

Advice, suggestions welcome.

(Another idea: post-render, dynamically replace the node’s <g> element in the SVG DOM with a bespoke pre-generated SVG group for a pie chart. But there are positioning issues there that I’ve not even begun to look into.)

[GrahamHannington]

Hi @magjac,

I still hope to one day publish that “showcase” repo I promised ages ago, but for now I’m told my work remains inhouse. For web-based graph visualizations that involve clusters (compound nodes)—doubtless, other use cases, too, but this is my specific area of interest—d3-graphviz remains the best solution that I know of. Thanks again for providing this library. I’m frankly mystified why it appears not to have the higher profile I think it deserves.

Re:

you probably also could use the order of the path elements

Yes, good point. That occurred to me, too, although I never got around to confirming the drawing order. I chose to match based on color because not every chart has the same number of slices; I don’t draw “zero-size” slices. That’s not a showstopper—in the same way I know the slice colors, I also know which slices each chart has—but the color-based matching code, insensitive to the absence or presence of particular slices, was slightly easier to write. Conceptually, I prefer your suggestion: relying on the drawing order, and knowing the number of slices, feels like a more elegant solution than matching color values. I might yet rewrite my code to do that.

[magjac]

Nice to hear from you again @GrahamHannington and even nicer to see that your still using the library 😎.

Glad you solved it. Thanks for sharing your findings. Instead of using the color, you probably also could use the order of the path elements, knowing that they are drawn in order starting from 0 degrees and counter clockwise (I think).