将变量添加到d3/javascript对象工具提示的href链接

下面是我正在做的：

var selection = canvas.selectAll("circle").data(data);      
selection.enter().append("circle")
    selection
      .attr("title", function(d){ return "<div class='candtip'>"+d.Name+"<br /><a
        href='Twitter.com/'+d.Twitter><img src='Twitter.png'/></a></div>"})

var selection=canvas.selectAll（“圆圈”）.data（数据）；
selection.enter（）.append（“圆”）
选择
.attr（“title”，函数（d）{return”“+d.Name+”
“}）

因此，对于每个元素，我都会显示一个工具提示，显示Twitter的徽标，然后我希望当您单击该图片时，它会将您带到个人Twitter页面，但我似乎无法使href部分正常工作。设置数据的方式是“d.Twitter”是一个变量，它保存了该个人Twitter页面的id，因此如果该页面是Twitter.com/OprahWinfrey，那么d.Twitter=OprahWinfrey

任何帮助都将不胜感激

试试看：

var selection = canvas.selectAll("circle").data(data);      
selection.enter().append("circle")
    selection // no need for this here
      .attr("title", function(d){ return "<div class='candtip'>" + d.Name + "<br /><a
        href='Twitter.com/" + d.Twitter + "'><img src='Twitter.png'/></a></div>"})

var selection=canvas.selectAll（“圆圈”）.data（数据）；
selection.enter（）.append（“圆”）
选择//此处不需要此选项
.attr（“title”，函数（d）{return”“+d.Name+”
“}）

我不确定您使用的浏览器是否可以在由

title

属性创建的工具提示中呈现html。另外，您只能在工具提示（即

title

attributes）中放置纯文本。如果您想要可单击的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>

圆圈{fill:#8ad；}
矩形{填充：白色；笔划：#eee；}
g、 candtip{display:none；}
a:hover g.candtip{display:block；}
g、 candtip:hover{display:block；}
var getY=函数（d，i）{return 100+i*100；}
var getTranslate=函数（d，i）{return“translate（100，+getY（d，i）+”）；}
var数据=[
{姓名：“Uwe Jugel”，推特：“ubunatic”}，
{名字：“尤文”，推特：“乌布纳蒂奇”}
]
var canvas=d3.select（“svg”）
var selection=canvas.selectAll（“a”）.data（数据）
var newLinks=selection.enter（）.append（“a”）
新链接
.attr（“xlink:target”，“u blank”）
.attr（“xlink:href”，函数（d，i）{return”http://twitter.com/“+d.Twitter；}）
newLinks.append（“圈”）
.attr（“cx”，100）
.attr（“cy”，getY）
.attr（“r”，40）
var newTooltips=newLinks.append（“g”）.attr（“class”，“candtip”）
attr（“transform”，getTranslate）；
newTooltips.append（“rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，100）
.attr（“高度”，30）
newTooltips.append（“文本”）
.attr（“x”，30）
.attr（“y”，20）
.text（函数（d，i）{返回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（“宽度”，“16px”）
.attr（“高度”，“16像素”）

它基本上设置了一个可悬停的

圆圈

和一个工具提示组

g.candtip

。工具提示通过简单的

：hover

规则完成。SVG中的链接通过

+

xlink:href

完成。所有数据都由d3+d3.style辅助函数读取和转换