score:1

Accepted answer

That's because you are trying to increase top property of text tag in SVG. This porperty just doesn't work. You can use translate instead of it or just use tags like div or span. Check the fiddle 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');
}

I'm not sure about offset of tooltip, if you want it moving with the mouse move you can use mouse coordinates.

score:1

Instead of .style('left', /*[...]*/) and .style('top', /*[...]*/) you can use .attr('x', [...]) and .attr('y', [...])

Also, you have to substract height/2 from y and width/2 from x, as the x and y attributes move text relative to its parent:

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>

score:1

You have to append a div and add css styles to it.

Working 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");
            }

Related Query