[英]Adding Variables to href link for d3/javascript object tooltip
所以這就是我正在做的事情:
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>"})
因此,對於每個元素,我有一個工具提示顯示,顯示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>"})
我不確定您使用哪種瀏覽器可以在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輔助函數讀取和轉換。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.