2017-12-31 66 views
1

Ich habe folgende DOT-Code in Viz.js:Assign IDs Elemente Viz.js TD in der SVG-Elemente erscheinen

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 eine ID zur letzten TD (id="abc") zugeordnet, aber Viz Js nicht fügen Sie diese id im erschaffenen Rohausgangssignal:

<?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> 

IDs Knoten zuweisen funktioniert in Viz.js, aber in meinem Knoten gibt es Texte und Symbole, die ich in TDs gelegen haben. Und ich möchte diesem TD einen Delegaten in meinem JQuery-Code zuweisen, also wenn der Benutzer auf TD klickt, wird eine bestimmte Funktion in meinem JavaScript-Code aufgerufen. Aber momentan kann ich dem TD keine ID oder Klasse zuweisen, um später darauf zugreifen zu können. Ich brauche in meinem HTML-Code so etwas wie diese:

<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> 

Damit ich einen Delegierten die es in meinem Javascript-Code wie folgt zuordnen:

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

Wie könnte ich das tun?

Antwort

1

Leider gibt es einen Fehler in Graphviz, der dazu führt, dass das ID-Attribut von TDs in der SVG-Ausgabe ignoriert wird. Zum Glück gibt es einen Workaround. Wenn ein Dummy-HREF-Attribut ebenfalls hinzugefügt wird, wird die ID beibehalten. Für eine detailliertere Erklärung siehe this answer.

Im Folgenden finden Sie Ihr modifiziertes Beispiel:

<!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>

+1

Nizza. Vielen Dank –

Verwandte Themen