0

だからここに私がやっていることがあります：

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 です。

どんな助けでも大歓迎です。

4

2 に答える 2

1

試す：

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>"})
于 2012-12-12T14:19:39.107 に答える
1

title属性によって作成されたツールチップで html をレンダリングできるブラウザを使用しているかどうかはわかりません。私の知る限り、プレーンテキストはツールチップ (つまり、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 ヘルパー関数によって読み取られ、変換されます。

于 2012-12-12T15:32:16.603 に答える