How to add a mouse hover tooltip on d3 radial component?

Question

I am using d3 to render a multi-radial components like below:

I want to add a mouse hover tooltips on each of the radial. but the path is rectangle which means I don't know whether the mouse position is hoving on each radial. So how can I add the tooltip on this component?

Below is the complete source code:

https://codepen.io/zhaoyi0113/pen/mpzPjw

Answer 1

You can do that by select all the class and append a mouse over function

Add this on your last build function

to get mouseover on radial

d3.selectAll('.bg').each(function(){
   d3.select(this).on('mouseover',function(){
     console.log( d3.select(this).style('fill') )
   })
 })

to get mouseover on icon

 d3.selectAll('.icon').each(function(){
      d3.select(this).on('mouseover',function(){
        console.log('class .icon')
      })
    })

 //based on https://bl.ocks.org/mbostock/1096355 //apple design:https://images.apple.com/watch/features/images/fitness_large.jpg "use strict"; (function(){ var gap = 2; var innerRadius = 140; var outerRadius = 180; var ranDataset = function () { var ran = Math.random(); return [ {index: 0, name: 'move', icon: "\", percentage: ran * 60 + 30}, {index: 1, name: 'exercise', icon: "\", percentage: ran * 60 + 30}, {index: 2, name: 'stand', icon: "\", percentage: ran * 60 + 30} ]; }; var ranDataset2 = function () { var ran = Math.random(); return [ {index: 0, name: 'move', icon: "\", percentage: ran * 60 + 30} ]; }; var colors = ["#e90b3a", "#a0ff03", "#1ad5de"]; var width = 500, height = 500, τ = 2 * Math.PI; function build(dataset,singleArcView){ var arc = d3.svg.arc() .startAngle(0) .endAngle(function (d) { return d.percentage / 100 * τ; }) .innerRadius(function (d) { return innerRadius - d.index * (40 + gap) }) .outerRadius(function (d) { return outerRadius - d.index * (40 + gap) }) .cornerRadius(20);//modified d3 api only var background = d3.svg.arc() .startAngle(0) .endAngle(τ) .innerRadius(function (d, i) { return innerRadius - d.index * (40 + gap) }) .outerRadius(function (d, i) { return outerRadius - d.index * (40 + gap) }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); //add linear gradient, notice apple uses gradient alone the arc.. //meh, close enough... var gradient = svg.append("svg:defs") .append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "100%") .attr("x2", "50%") .attr("y2", "0%") .attr("spreadMethod", "pad"); gradient.append("svg:stop") .attr("offset", "0%") .attr("stop-color", "#fe08b5") .attr("stop-opacity", 1); gradient.append("svg:stop") .attr("offset", "100%") .attr("stop-color", "#ff1410") .attr("stop-opacity", 1); //add some shadows var defs = svg.append("defs"); var filter = defs.append("filter") .attr("id", "dropshadow") filter.append("feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", 4) .attr("result", "blur"); filter.append("feOffset") .attr("in", "blur") .attr("dx", 1) .attr("dy", 1) .attr("result", "offsetBlur"); var feMerge = filter.append("feMerge"); feMerge.append("feMergeNode") .attr("in", "offsetBlur"); feMerge.append("feMergeNode") .attr("in", "SourceGraphic"); var field = svg.selectAll("g") .data(dataset) .enter().append("g"); field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)") field.append("path").attr("class", "bg") .style("fill", function (d) { return colors[d.index]; }) .style("opacity", 0.2) .attr("d", background); field.append('marker') .attr('id', 'marker'); field.append("text").attr('class','icon'); if(singleArcView){ field.append("text").attr('class','goal').text("OF 600 CALS").attr("transform","translate(0,50)"); field.append("text").attr('class','completed').attr("transform","translate(0,0)"); } d3.transition().duration(1750).each(update); function update() { field = field .each(function (d) { this._value = d.percentage; }) .data(dataset) .each(function (d) { d.previousValue = this._value; }); field.select("path.progress").transition().duration(1750).delay(function (d, i) { return i * 20 }) .ease("elastic") .attrTween("d", arcTween) .style("fill", function (d) { if(d.index===0){ return "url(#gradient)" } return colors[d.index]; }); field.select("text.icon").text(function (d) { return d.icon; }).attr("transform", function (d) { return "translate(10," + -(150 - d.index * (40 + gap)) + ")" }); field.select("text.completed").text(function (d) { return Math.round(d.percentage /100 * 600); }); setTimeout(update, 2000); } function arcTween(d) { var i = d3.interpolateNumber(d.previousValue, d.percentage); return function (t) { d.percentage = i(t); return arc(d); }; } d3.selectAll('.bg').each(function(d,i){ d3.select(this).on('mouseover',function(){ console.log( d3.select(this).style('fill')) })}) d3.selectAll('.icon').each(function(d,i){ d3.select(this).on('mouseover',function(){ console.log('ok') }) }) } build(ranDataset); build(ranDataset2,true); })() 

 html{ height: 100%; } body { min-height: 100%; background: #000000; padding:0; margin:0; } .icon{ font-family:fontawesome; font-weight:bold; font-size:30px; } .goal,.completed{ font-family: 'Roboto','Myriad Set Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; fill:white; text-anchor:middle; } .goal{ font-size: 30px; } .completed{ font-size: 95px; } 

 <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> </head> <script src="https://cdn.rawgit.com/bm-w/d3/master/d3.js"></script>