我不确定您使用的浏览器可以在title
属性创建的工具提示中呈现 html。AFAIK,您只能将纯文本放在工具提示中(即,在title
属性中)。如果您想要可点击的 html 工具提示,您需要自己创建它们,例如,使用 SVG 标记和组。
这是一个相当完整的示例,您可以根据自己的目的进行剖析:
<style>
circle { fill: #8ad; }
rect { fill: white; stroke: #eee; }
g.candtip { display: none; }
a:hover g.candtip { display: block; }
g.candtip:hover { display: block; }
</style>
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
<script type="text/javascript">
var getY = function(d,i) { return 100 + i*100; }
var getTranslate = function(d,i) { return "translate(100,"+getY(d,i)+")"; }
var data = [
{Name: "Uwe Jugel", Twitter: "ubunatic"},
{Name: "Juve", Twitter: "ubunatic"}
]
var canvas = d3.select("svg")
var selection = canvas.selectAll("a").data(data)
var newLinks = selection.enter().append("a")
newLinks
.attr("xlink:target","_blank")
.attr("xlink:href", function(d,i) { return "http://twitter.com/"+d.Twitter; })
newLinks.append("circle")
.attr("cx", 100)
.attr("cy", getY)
.attr("r", 40)
var newTooltips = newLinks.append("g").attr("class", "candtip")
newTooltips.attr("transform", getTranslate );
newTooltips.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 30)
newTooltips.append("text")
.attr("x", 30)
.attr("y", 20)
.text( function(d,i) { return d.Name; } )
newTooltips.append("svg:image")
.attr("xlink:href", "https://twitter.com/images/resources/twitter-bird-16x16.png")
.attr("x", 5)
.attr("y", 5)
.attr("width", "16px")
.attr("height", "16px")
</script>
它基本上设置了一个悬停circle
和一个工具提示组g.candtip
。工具提示是通过简单的:hover
规则完成的。SVG 中的链接是通过<a>
+完成的xlink:href
。所有数据都由 d3 + d3.style 辅助函数读取和转换。