D3-graphviz中id与title的区别及节点标识方法问询

1. title属性是什么？能当ID用吗？ #

• <title>是SVG原生元素，作用是为对应SVG元素添加鼠标悬停提示文本。在d3-graphviz生成的SVG里，节点的<title>内容默认是Graphviz定义的节点名称，边的<title>默认是边的连接关系字符串（比如n1->n2）。
• 对于节点来说，它的title值通常和你自定义的节点id一致（比如示例里n1的title就是n1），但不能完全等同于自定义ID：比如你给边设置的id是e1，但生成的title是n1->n2，和自定义id不匹配。如果场景仅需识别节点，title可临时替代，但要覆盖所有元素（包括边），还是得用自定义的id属性。

2. d3-graphviz中id与title的关系 #

• 你在Graphviz脚本里给节点/边设置的id属性，会直接映射为SVG对应<g>元素的id属性（比如示例里节点n1的<g id="n1">，边的<g id="e1">）。
• title是Graphviz自动生成的描述性文本，和自定义id是两个独立属性：节点的title对应节点名，边的title对应连接关系，只有当你把节点名和自定义id设为同一个值时，两者才会一致。

3. 关于.keyMode('id')和鼠标事件中ID混淆的问题 #

• .keyMode('id')的作用是图形更新时维持对象恒常性：当重新渲染图形时，d3会用你设置的id匹配新旧DOM元素，避免重复创建，它不会修改SVG元素的id值。
• 你在鼠标事件中获取到的svg-0.g1.n2是浏览器生成的全局唯一标识（比如通过event.target.id直接获取时的带前缀值），但SVG元素本身的真实id是你设置的n2，可以通过event.target.getAttribute('id')获取自定义的id属性值，就能拿到正确的n1、n2、e1。

示例验证 #

输入的Graphviz脚本：

digraph {
label=""
id="g1"
n1 [id="n1", label="First Node"]
n2 [id="n2", label="Second Node"]
n1 -> n2 [id="e1", arrowHead="normal", arrowTail="dot"]
}

生成的SVG关键片段：

<g id="n1" class="node">
  <title>n1</title>
  <ellipse fill="none" stroke="black" cx="62.8" cy="-90" rx="52.16" ry="18"></ellipse>
  <text text-anchor="middle" x="62.8" y="-85.8" font-family="Times,serif" font-size="14.00">First Node</text>
</g>
<g id="n2" class="node">
  <title>n2</title>
  <ellipse fill="none" stroke="black" cx="62.8" cy="-18" rx="62.59" ry="18"></ellipse>
  <text text-anchor="middle" x="62.8" y="-13.8" font-family="Times,serif" font-size="14.00">Second Node</text>
</g>
<g id="e1" class="edge">
  <title>n1-&gt;n2</title>
  <path fill="none" stroke="black" d="M62.8,-71.7C62.8,-63.98 62.8,-54.71 62.8,-46.11"></path>
  <polygon fill="black" stroke="black" points="66.3,-46.1 62.8,-36.1 59.3,-46.1 66.3,-46.1"></polygon>
</g>

鼠标事件中获取正确ID的代码示例：

d3.selectAll('.node, .edge').on('click', function(event) {
  const realId = this.getAttribute('id');
  console.log('元素真实ID:', realId); // 输出n1、n2或e1
});

内容的提问来源于stack exchange，提问作者Wizard of Kneup