[英]d3 js tooltip on hover treenode not rendering
這是當我將鼠標懸停在樹節點上時顯示工具提示的代碼。
function mouseover(d) {
d3.select(this).append("div")
.attr("class","tooltip")
.attr('transform', function(d){
return 'translate(5, -10)';
})
.text(d.name);
}
這是我的工具提示本身的CSS
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #c00;
text-decoration: none;
}
.tooltip:hover:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
將鼠標懸停在節點上時,看不到工具提示。 我對d3相當陌生。
可能是什么問題?
我為你制作演示
var svg = d3.select("body") .append("svg") .attr('height', '300px') .attr('width', '300px') var bg = svg.append("g") .append('rect') .attr('height', '300px') .attr('width', '300px') .attr('fill', '#F00'); var tooltip = svg.append("g") .append('rect') .attr('height', '50px') .attr('width', '50px') .attr('fill', '#0F0'); bg.on('mousemove', function() { var x = d3.mouse(this)[0] - 25; var y = d3.mouse(this)[1] - 70 tooltip .attr("transform", "translate(" + x + "," + y + ")") });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.