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/ 谢谢
Shubham Sharma

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

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

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

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 2

那是因为您试图增加SVG中top标签的text属性。这项功能无法正常工作。您可以使用translation代替它，也可以只使用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 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");
            }

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

3 个答案: