1

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?

1 Answer 1

2

Unfortunately there is a bug in Graphviz that causes the ID attribute of TD's 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/[email protected]/viz.js"></script>
<script src="https://unpkg.com/[email protected]/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>

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.