D3データをSVGツールチップにバインドする

Question

IDはthis tooltipからになりますが、データをバインドする方法を理解できません。

この例では、ホバー上にサイズ値をテキストとして表示する2つの円が必要です。

watch.csv

circle,size 
green,5 
yellow,10 

コードこのため

d3.csv("watch.csv", function(error, watch) { 

    var tooltip = d3.select("body") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .text(function(d) { return d.size; }) //TRYING THIS 

    var sampleSVG = d3.select(".example_div") 
    .append("svg:svg") 
    .attr("class", "sample") 
    .attr("width", 300) 
    .attr("height", 300); 

    d3.select(".example_div svg") 
    .data(watch)     //AND THIS 
    .enter()      
    .append("svg:circle") 
    .attr("stroke", "black") 
    .attr("fill", "aliceblue") 
    .attr("r", 30) 
    .attr("cx", 52) 
    .attr("cy", 52) 
    .on("mouseover", function() { 
     return tooltip.style("visibility", "visible"); 
    }) 
    .on("mousemove", function() { 
     return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); 
    }) 
    .on("mouseout", function() { 
     return tooltip.style("visibility", "hidden"); 
    }); 


}); 

Plunker

Answer 1

変更ツールチップvar：

var tooltip = d3.select("body") 
    .append("div") 
    .attr("class", "someTooltip") 
    .style("opacity", 0); 

セレクタ.someTooltipを使用して、CSSでツールチップをスタイルします。このため

そして、すべてのあなたの「mouseove」、「のMouseMove」に変更し、「マウスアウト」：あなたはjQueryプラグインでjQueryとほろ酔いを追加する必要が

.on("mousemove", function(d) { 
    tooltip.html("The size is: " + d.size) 
    .style("top", (d3.event.pageY - 10) + "px") 
    .style("left", (d3.event.pageX + 10) + "px") 
    .style("opacity", 1); 
}).on("mouseout", function(){ 
    tooltip.style("opacity", 0); 
}); 

Answer 2

まず。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.js"></script> 

ほろ酔いCSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.css" rel="stylesheet" type="text/css" /> 

次は、このようなほろ酔いjQueryの道にデータをバインドする必要があります。

$('svg circle').tipsy({ //select all circles 
    gravity: 'w', 
    html: true, 
    title: function() { 
     var d = this.__data__;//get the data from the dom 
     return 'Hi there! My color is <span style="color:' + d.circle + '">' + d.size + '</span>'; //make the tipsy tool tip using the data 
    } 
    }); 

ことが必要とされていないとして、このようなすべてのツールチップのコードを削除します。

.on("mouseover", function() { 
     return tooltip.style("visibility", "visible"); 
    }) 
    .on("mousemove", function() { 
     return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); 
    }) 
    .on("mouseout", function() { 
     return tooltip.style("visibility", "hidden"); 
    }); 

この

var tooltip = d3.select("body") 
    .append("div") 
    .style("position", "absolute") 
    .style("z-index", "10") 
    .style("visibility", "hidden") 
    .text(function(d) { return d.size; }) //TRYING THIS 

を削除するだからあなたのコードは、このhere

のようになります。