在 D3.js 中为 svg:g 元素的子元素添加标题答案

【问题标题】：Adding a title to child element of svg:g element in D3.js在 D3.js 中为 svg:g 元素的子元素添加标题
【发布时间】：2019-05-22 15:11:25
【问题描述】：

我正在研究 d3 树图。图形的一个节点是 250x50 大小的矩形。图的节点有多个子元素。我有整个节点的标题。但当有人将鼠标悬停在眼睛图标上时，我想要一个单独的标题。眼睛图标位于节点叶子的右下角。

当鼠标悬停在矩形（整个节点）的任意位置时，此工具提示会起作用。

nodeEnter.append("svg:title")
                        .text(function (d) {
                            return d.name;
                        });

试过了

nodeEnter.append("svg:path")
     .attr("d", "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 
                 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5- 
                 5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 
                 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z")
     .attr("transform", function (d) {
                            var y = d.rectHeight - 32;
                            return "translate(" + 225 + "," + y + ")"
                        })
     .attr("title", "View Details")
     .classed("eye", true);

当鼠标悬停在眼睛图标而不是整个节点上时，谁能帮我显示单独的标题（工具提示）。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

在 SVG 标题中有不同的语法，使用 <title> 标签：

selection.append('title').text(d => 'hello world');

d3.select('body')
  .append('svg')
  .attr('viewBox', '-50 -50 350 100')
  .attr('height', '88vh')
  .selectAll('circle')
  .data(Array(6).fill(0).map((d,i) => Math.random()))
  .enter()
  .append('circle')
  .attr('cx', (d,i) => i*50)
  .attr('cy', d => (d - 0.5)*25)
  .attr('fill', d => `hsl(${d*360},55%,55%)`)
  .attr('r', 22)
  .append('title')
  .text((d,i) => `circle ${i+1}`);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：

selection.append('title').text(d => 'hello world' 给了我线索。谢谢

【解决方案2】：

我找到的解决方案--

d3.selectAll(".eye")
                        .append("svg:title")
                        .text("View Details");

【讨论】：