0

グラフを表示する小さな Web ページを作成しましたが、ツールチップの表示に問題があります。DOM に適切に追加されていますが、ページに表示されません。

 d3.selectAll("circle")
        .on("mouseover", function(d){
            d3.select(this)
                .transition()
                .attr("r", circle_size_hover)
                .duration(transition_duration)
                .style("opacity", 1);

            d3.select(this)
                .append("div")
                    .attr("class", "mytooltip")
                    .text(d.alarms)
                    .transition()
                    .style("opacity", 1);

            console.log(d.alarms);
        });

この後、DOM で div を確認できます。

<g class="circles">
    <circle cx="79.34074074074073" cy="113.50243902439024" r="7" style="opacity: 0.7;">
    <div class="mytooltip">51.28205128205128</div>
    </circle>
</g>

CSS:

.mytooltip {
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: lightsteelblue;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

JSFiddle : http://jsfiddle.net/L42LU/4/

4

2 に答える 2

1

<div>SVG 内にHTML 要素 ( a など) を挿入することは無効です。foreignObjectツールチップを要素として SVGに挿入できる場合があります。

于 2013-08-31T19:08:50.497 に答える