为什么工具提示不随鼠标移动？

Question

这是制作饼图的代码。

我在饼图中添加了 2 个功能。第一个是当鼠标悬停在弧度上时增加弧度。

其次，当我悬停时，工具提示会显示鼠标的 y 位置，并且此工具提示会随鼠标移动。

但我的问题是。工具提示文本不会随着鼠标的移动而移动。

我已经看到了各种堆栈溢出链接，但我无法找到解决方案。下面我还附上了链接，这样问题就不会被标记为重复。

请不要给我新的工具提示代码。更正这个。

以下是我已经访问过的链接
Why is my D3.js tooltip not working
D3 - Positioning tooltip on SVG element not working
Tooltips not showing on mouse move and mouse over

jsfiddle 的链接：- https://jsfiddle.net/uoh1bsrp/ 谢谢，
舒巴姆·夏尔马

width = 600
height = 600

svg = d3.select('body').append('svg').attr('width',width).attr('height',height).append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
a = [2,5,7]
pie = d3.pie()
radius = 150

arc = d3.arc().innerRadius(0)
.outerRadius(radius);
arcs = svg.selectAll('arc').data(pie(a)).enter().append('g')
arcs.append("path").attr('d',function(d){return arc(d)})

tooltip  = svg.append('text')

color = ['red','green','blue']
path = d3.selectAll('path').style('fill',function(d,i){return color[i]})

path.on('mouseover',handlemouseover)
path.on('mouseout',handlemouseout)
path.on('mousemove',handlemousemove)



function handlemouseover(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
    .outerRadius(180)(d)});

}


function handlemousemove(){
	// svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
	tooltip.text(function(){return d3.event.layerX}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px').style('display','block');
}


function handlemouseout(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});
	tooltip.style('display', 'none');
}

<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
</head>

Answer 1

那是因为您试图在 SVG 中增加 text 标签的 top 属性。这个属性是行不通的。您可以使用 translate 来代替它，或者只使用 div 或 span 之类的标签。 检查小提琴https://jsfiddle.net/fr71t0o3/3/：

function handlemousemove() {
  // svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
  tooltip
    .text(function() {
        return d3.event.layerX;
    })
    .style('transform', `translate(${d3.event.layerX - 300}px, ${d3.event.layerY - 300}px)`)
    .style('display', 'block').style('color','red');
}

我不确定工具提示的偏移量，如果您希望它随着鼠标移动而移动，您可以使用鼠标坐标。

Answer 2

您可以使用.attr('x', [...]) 和.attr('y', [...]) 而不是.style('left', /*[...]*/) 和.style('top', /*[...]*/)

此外，您必须从x 中减去height/2 和width/2，因为x 和y 属性移动文本相对于其父级：

width = 600
height = 600

svg = d3.select('body').append('svg').attr('width',width).attr('height',height).append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
a = [2,5,7]
pie = d3.pie()
radius = 150

arc = d3.arc().innerRadius(0)
.outerRadius(radius);
arcs = svg.selectAll('arc').data(pie(a)).enter().append('g')
arcs.append("path").attr('d',function(d){return arc(d)})

tooltip  = svg.append('text')

color = ['red','green','blue']
path = d3.selectAll('path').style('fill',function(d,i){return color[i]})

path.on('mouseover',handlemouseover)
path.on('mouseout',handlemouseout)
path.on('mousemove',handlemousemove)



function handlemouseover(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
    .outerRadius(180)(d)});

}


function handlemousemove(){
	// svg.append('text').text(function(){return 'shubham'}).style('top',(d3.event.layerY + 10)+'px').style('left',(d3.event.layerX + 10) + 'px')
	tooltip.text(function(){return d3.event.layerX}).attr('y',(d3.event.layerY - height/2 + 10)+'px').attr('x',(d3.event.layerX - width/2 + 10) + 'px').style('display','block');
}


function handlemouseout(){
	d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});
	tooltip.style('display', 'none');
}

<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
</head>

Answer 3

您必须附加一个 div 并向其添加 css 样式。

工作 jsfiddle：https://jsfiddle.net/amp42fjn/

var tooltip = d3.select("body")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .text("a simple tooltip");  



    path.on("mouseover",handlemouseover)
    path.on("mousemove", handlemousemove)
    path.on("mouseout", handlemouseout);


            function handlemouseover(){
                d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0)
                .outerRadius(180)(d)});
                tooltip.style("visibility", "visible");

            }
            function handlemousemove(){

tooltip.text(function(){return d3.event.layerX}).style('top',(d3.event.layerY + 10)+'px').style("top",
        (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
            }
            function handlemouseout(){
                d3.select(this).attr('d',function(d){return d3.arc().innerRadius(0).outerRadius(radius)(d)});

        tooltip.style("visibility", "hidden");
            }