将 ID 分配给 Viz.js 的 TD 元素以显示在 svg 元素中答案

【问题标题】：Assign IDs to TD elements of Viz.js to appear in the svg elements将 ID 分配给 Viz.js 的 TD 元素以显示在 svg 元素中
【发布时间】：2017-12-31 22:14:28
【问题描述】：

我在 Viz.js 中有以下 DOT 代码：

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，但 Viz.js 没有在创建的原始输出中插入此 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 中为节点分配 ID 确实有效，但在我的节点中，我在 TD 中找到了文本和图标。我想在我的 JQuery 代码中为这个 TD 分配一个委托，所以当用户点击 TD 时，我的 javascript 代码中的一个特定函数被调用。但现在我无法为 TD 分配 ID 或类以便以后调用它。我的 HTML 代码中需要这样的内容：

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

这样我就可以在我的 javascript 代码中为它分配一个委托，如下所示：

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

我该怎么做？

【问题讨论】：

标签： javascript jquery html svg graphviz

【解决方案1】：

不幸的是，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/viz.js@1.8.0/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@0.1.2/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>

【讨论】：

不错。谢谢