我正在研究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);
当鼠标悬停在眼睛图标上而不是整个节点上时,有人可以帮助我显示单独的标题(工具提示)吗?
答案 0 :(得分:0)
语法不同,请使用<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}`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
答案 1 :(得分:0)
我找到的解决方案-
d3.selectAll(".eye")
.append("svg:title")
.text("View Details");