Search code examples
javascriptjqueryhtmlsvggraphviz

Assign IDs to TD elements of Viz.js to appear in the svg elements

I have the following DOT code in Viz.js:

digraph G {
node [fontname = "font-awesome"];
17 [id=17, shape="hexagon", label=<<TABLE BORDER="0">
<TR><TD>undefined</TD></TR>
<TR><TD>[47-56]</TD></TR>
<TR><TD id = "abc"><FONT COLOR="#000000">&#xf06d;</FONT></TD></TR>
</TABLE>>, style="filled"];
}

I assigned an ID to the last TD (id="abc"), but Viz.js does not insert this id in the created raw output: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
 -->
<!-- Title: G Pages: 1 -->
<svg width="137pt" height="132pt"
 viewBox="0.00 0.00 137.01 132.11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 128.1075)">
<title>G</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-128.1075 133.0065,-128.1075 133.0065,4 -4,4"/>
<!-- 17 -->
<g id="17" class="node">
<title>17</title>
<polygon fill="#d3d3d3" stroke="#000000" points="129.0097,-62.0537 96.7565,-124.1613 32.25,-124.1613 -.0032,-62.0537 32.25,.0538 96.7565,.0538 129.0097,-62.0537"/>
<text text-anchor="start" x="37.013" y="-79.4537" font-family="font-awesome" font-size="14.00" fill="#000000">undefined</text>
<text text-anchor="start" x="44.0123" y="-57.4537" font-family="font-awesome" font-size="14.00" fill="#000000">[47&#45;56]</text>
<text text-anchor="start" x="59.1729" y="-35.4537" font-family="font-awesome" font-size="14.00" fill="#000000"></text>
</g>
</g>
</svg>

Assigning IDs to nodes does work in Viz.js, but in my node there are texts and icons which I have located in TDs. And I want to assign a delegate in my JQuery code to this TD so when the user clicks on the TD, a specific function in my javascript code is called. But right now I am not able to assign an ID or class to the TD to be able to call it later. I need in my HTML code something like this: 

<text id="Test1" class="ClickIcon" text-anchor="start" x="59.1729" y="-35.4537" font-family="font-awesome" font-size="14.00" fill="#000000"></text>

So that I can assign a delegate the it in my javascript code like this:

graphContainer.delegate('text.ClickIcon', 'click', function(
        event) {
            mainWindow.webContents.send('alert', 'Event done');
});

How could I do that?

Solution

  • Unfortunately there is a bug in Graphviz that causes the ID attribute of TDs to be ignored in the SVG output. Fortunately, there's a workaround. If a dummy HREF attribute is also added, the ID is preserved. For a more detailed explanation, see this answer.

    Below is your modified example:

    <!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@0.1.2/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var dotSrc = `
digraph G {
node [fontname = "font-awesome"];
17 [id=17, shape="hexagon", label=<<TABLE BORDER="0">
<TR><TD>undefined</TD></TR>
<TR><TD>[47-56]</TD></TR>
<TR><TD id = "abc" HREF=" "><FONT COLOR="#000000">&#xf06d;</FONT></TD></TR>
</TABLE>>, style="filled"];
}
`;

var graphviz = d3.select("#graph").graphviz();
var dotSrcLines;

function render(dotSrc) {
//    console.log('DOT source =', dotSrc);
    dotSrcLines = dotSrc.split('\n');

    transition1 = d3.transition()
        .delay(100)
        .duration(1000);

    graphviz
        .transition(transition1)
        .renderDot(dotSrc);

    transition1
      .transition()
        .duration(0)
        .on("end", function () {
            nodes = d3.selectAll('.node,.edge');
            nodes
              .selectAll("g")
                .on("click", fieldClickHandler)
              .selectAll("a")
                // Remove the workaround attributes to avoid consuming the click events
                .attr("href", null)
                .attr("title", null);
        });
}

function fieldClickHandler () {
    alert("Event done");
}

render(dotSrc);

</script>