2012-07-04 22 views
6

ノードの隣にポップアップメッセージを追加しようとしましたが、他のもののように見えて、テキストsvgとimage cantをappendとともに表示することができます。d3js divを追加

node.append("text") 
     .attr("dx", 16) 
     .attr("dy", ".0em") 
     .text(function(d) { return d.name }); 

テキストを追加しますが、divと表示されないnode.append( "div")を追加しようとしました。私はここに行方不明のものがありますか?どのように私はeaslyノードの位置を得ることができるので、私は別の要素に属性を転送することができます。

答えて

6

SVGのどこにでもHTML要素を配置することはできません。foreignObject要素に囲む必要があります(hereを参照)。 text要素とforeignObjectの両方をSVGグループ(g要素)に囲み、その位置を設定する場合は、両方で同じ位置を設定する必要はなく、同じ場所に表示する必要があります。

+0

[OK]を、私はすでにグラムグループを持っており、もしこの例でわかるように

d3.select("#nytg-tooltip").style('top',ypos+"px").style('left',xpos+"px").style('display','block'); 

要素を追加して位置を設定する必要はありません。どうすればdivを追加できますか?後で外観のためにdivを修正したいのですが、それは表示されません。それは見えません。 – BlitzCrank

+0

私が言ったように、 'div'のようなHTML要素を' foreignObject'要素の中に置く必要があります。後で通常のセレクタを使用してその属性を選択して変更することができます。 –

+0

svg.append( "foreignObject") .attr( "width"、480) .attr( "height"、500) .append( "xhtml:div") .style( "font"、 "14px ' Helvetica Neue '") .html(' asd '); – BlitzCrank