我正在尝试让此文本在鼠标悬停时显示,但它不起作用,有人可以提供一些见解吗?文档中有多个圆圈,我希望每个圆圈都在鼠标悬停时显示头顶文本。当前表单应该到处显示“你好”,但什么也没有。
d3.selectAll("circle")
.on("mouseover",function(d){
var x = parseFloat( d3.select(this).attr("cx") );
var y = parseFloat( d3.select(this).attr("cy") );
d3.selectAll("circle")
.append("text")
.attr("class","tooltipText")
.attr("x",x)
.attr("y",y)
.attr("stroke-width",1)
.attr("fill", "white")
.attr("font-size", "13px")
.attr("text-anchor", "middle")
.text(function(){
return "hello";
});
});
最佳答案
您应该将您的圈子封装在 g
内元素。这些将作为 <div>
HTML 中的标签。您可以添加 class
归因于这些元素,以便之后可以轻松选择它们。
//circles creation
var circles = d3.selectAll('svg').append('svg')
.append('g').attr('class', 'circles').data( someData );
circles.enter().append('g').attr('class', 'circle')
.append('circle')
.attr('cx', function(d) { return xScale(d); })
.attr('cy', function(d) { return yScale(d); })
.append('text').attr('style', 'display:none;')
.text(function(d) { return d.title; })
.attr('x', function(d) { return xScale(d); })
.attr('y', function(d) { return yScale(d) + 2*radius(d); });
d3.selectAll('.circle').on('mouseover', function( data, index, element ) {
d3.select( element ).attr('style', '');
});
请注意
xScale, yScale, radius
都是数据的函数。
关于d3.js - 使用 D3 时未出现附加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17096004/