할당 ID는 SVG 요소에 표시

I가 다음 DOT의 Viz.js 코드 : 나는 마지막 TD (id="abc")에 ID를 할당할당 ID는 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"]; 
}

하지만, 즉

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

노드에 ID를 할당 Viz.js에서 작업을 수행하지만, 내 노드에서 텍스트와 내가 TDs를에 위치한 한 아이콘이 있습니다의 .js는 생성 된 원시 출력이 id를 삽입하지 않습니다. 그리고 내에 내 JQuery 코드에서 대리인을 할당하려고하므로 사용자가 TD을 클릭하면 자바 스크립트 코드의 특정 함수가 호출됩니다. 그러나 지금은 TD에 ID 또는 클래스를 지정하여 나중에 호출 할 수 없습니다. 나는이 같은 내 자바 스크립트 코드에 대리인에게이를 할당 할 수

<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

불행히도 Graph의 SVG 출력에서 TD의 ID 속성이 무시되는 버그가 있습니다. 다행히도 해결 방법이 있습니다. 더미 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

니스 :

다음은 수정 된 예이다. 고맙습니다 –

답변

관련 문제