如何为Viz.js生成的SVG中TD对应text元素添加ID与类？

这个问题我之前也碰到过——Graphviz（Viz.js基于它）在处理HTML-style节点标签时，不会保留<TD>的自定义ID或类属性，但我们可以换个思路，直接给标签内的<FONT>元素添加大写的ID和CLASS属性，这些属性会被Graphviz传递到最终生成的SVG <text>元素上。

步骤1：修改你的DOT代码 #

把原来给<TD>加id的逻辑，转移到内部的<FONT>标签上，注意属性名必须是大写的ID和CLASS：

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><FONT ID="Test1" CLASS="ClickIcon" COLOR="#000000">&#xf06d;</FONT></TD></TR> 
        </TABLE>>, 
        style="filled"
    ]; 
}

步骤2：验证生成的SVG #

用Viz.js渲染上面的代码后，对应的<text>元素会带上你需要的id和class属性，效果如下：

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

步骤3：正常使用jQuery委托事件 #

现在你可以直接用原来的jQuery代码绑定点击事件，因为目标元素已经有了ClickIcon类：

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

为什么这个方法可行？ #

Graphviz在解析HTML-style标签时，只会保留<FONT>标签的部分核心属性（包括ID、CLASS、COLOR等），并将这些属性映射到生成的SVG文本元素上。而<TD>的自定义属性会被忽略，因为Graphviz只处理<TD>的布局相关属性（比如ALIGN、VALIGN）。

内容的提问来源于stack exchange，提问作者Code Pope