割り当てIDは、私はViz.jsに次のドットコード有しSVG要素

に表示するViz.jsの要素TDする：割り当てIDは、私はViz.jsに次のドットコード有しSVG要素

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"]; 
}

を私が最後TD（id="abc"）にIDを割り当てたが、ビズ.jsファイルは作成された生の出力でこのidを挿入しません：ノードにIDを割り当てる

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

はViz.jsで作業を行いますが、私のノードで、私はTDをに位置しているテキストやアイコンがあります。私はこのTDにJQueryコードの代理人を割り当てたいので、ユーザーがTDをクリックすると、JavaScriptコードの特定の関数が呼び出されます。しかし今は、TDにIDやクラスを割り当てて後で呼び出すことができません。私はこのような私のjavascriptのコードでは、デリゲートにそれを割り当てられるように

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

：私は私のHTMLコード内でこのようなものが必要

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

私はそれをどのように行うことができますか？

出典

2017-12-31 Code Pope

残念ながらGraphvizにはTDのID属性がSVG出力で無視されるバグがあります。幸いにも、回避策があります。ダミーHREF属性も追加された場合、IDは保持されます。詳細はthis answerを参照してください。

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

出典

2018-01-01 10:55:15 magjac

ニース：

以下は、あなたの変形例です。ありがとうございました –

割り当てIDは、私はViz.jsに次のドットコード有しSVG要素

答えて

関連する問題