Develop Reference

Failing to alter radius of an arc

I'm trying to expand the outerRadius of an arc thats created in my piechart. I fail to see how to do this upon mouse over. I have tried to make a new arc with a bigger outerRadius that I have made earlier (bArc), and apply this to my path attribute "d"
d3.select(this).select("path").attr("d", bArc);
in an mouseover event on path
path.on("mouseover", function(d){
but to no avail, and no errors in the console. I'm a bit at a loss, and all resources I can find on the subject seems to be old and deprecated for v4.
I have made this fiddle:
https://jsfiddle.net/sw8h0uvj/

This line...
d3.select(this).select("svg").attr("d", bArc);
... makes little sense. You have to apply the changes to the DOM element, which is simply this. Therefore, it should be:
d3.select(this).attr("d", bArc);
Don't forget to change the d attribute back when you do mouseout.
Here is your code with those changes:
var data = [{
label: '0-24%',
color: "#ff875e",
highlight: "#ff7a4d",
value: 3,
},
{
label: '25%-49%',
color: "#f6bc58",
highlight: "#f5b13d",
value: 1,
},
{
label: '50%-74%',
color: "#eae860",
highlight: "#e7e54b",
value: 2,
},
{
label: '75%-100%',
color: "#85d280",
highlight: "#80d07b",
value: 3,
}
];
var tooltip = d3.select('body')
.append('div')
.attr('class', 'tooltip2')
.style("opacity", 0);
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2.5;
var outerRadius = height / 2 - 20;
//D3 allows colours to be defined as a range, beneath is input the ranges in same order as our data set above. /Nicklas
var color = d3.scaleOrdinal()
.range(['#ff875e', '#f6bc58', '#eae860', '#85d280']);
var svg = d3.select('#piechart2')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius)
.padAngle(.05)
.padRadius(radius / 5);
var bArc = d3.arc()
.innerRadius(0)
.outerRadius(radius * 1.1)
.padAngle(.05)
.padRadius(radius / 5);
var pie = d3.pie()
.value(function(d) {
return d.value;
})
.sort(null);
var path = svg.selectAll('path')
.data(pie(data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d) {
return color(d.data.color);
});
path.transition()
.duration(500)
.attrTween("d", tweenPie);
path.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9)
.style("display", null)
.text(d.data.label + ": " + d.data.value);
d3.select(this).transition()
.duration(500)
.style('fill', d.data.highlight)
.attr("d", bArc);
});
path.on("mousemove", function() {
tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
});
path.on("mouseout", function(d) {
d3.select(this).transition()
.duration(500)
.style('fill', d.data.color)
.attr("d", arc);
tooltip.transition()
.duration(300)
.style("opacity", 0);
});
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({
startAngle: 0,
endAngle: 0
}, b);
return function(t) {
return arc(i(t));
};
}
.tooltip2 {
position: absolute;
text-align: center;
width: auto;
height: 28px;
padding: 2px;
font: 18px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="piechart2" style="text-align:center; margin-bottom:1em;">
</div>

D3 Pie chart not updating label on center

I have a requirement to update a d3 pie chart. I am able to update the arcs properly, but I am having issues in updating the label on the center. I am showing the sum of numbers in the label in the center. Can someone help me with this ?
Please find the plunk below.
https://plnkr.co/edit/L9uBnyZmt2TDvLJDUSE1?p=info
path = path.data(pie(dataset));
svg.selectAll('text').data(pie(dataset)).enter()
.text(function (d) {
return (25);
})
.transition()
.duration(1000)
.style("opacity", 1);
textG.select("text")
.style("opacity", 0)
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.data(pie(dataset))
.text(function (d) {
return d.data['count'];
})
.transition()
.duration(1000)
.style("opacity", 1);
path.transition()
.duration(750)
.attrTween('d', function (d) {
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function (t) {
return arc(interpolate(t));
};
});
Am changing the data set on click on the legend. You can see that the arc refreshes, but not the label in the center
Am new to D3 and still figuring things out.
Thanks in advance.

You should also update the center text and other labels in click listener.
var sum = d3.sum(dataset, function(d) {
return d.count;
});
svg.select("text.centerText")
.text(sum);
textG.data(pie(dataset));
textG.select("text")
.transition()
.duration(750)
.attr('transform', function(d) {
return 'translate(' + arc.centroid(d) + ')';
})
.text(function(d, i) {
return d.data.count > 0 ? d.data.count : '';
});
(function(d3) {
'use strict';
var width = 360;
var height = 300;
var radius = Math.min(width, height) / 4;
var donutWidth = 40;
var legendRectSize = 18;
var legendSpacing = 4;
var data1 = [{
'label': 'Label 1',
count: 5
},
{
'label': 'Label 2',
count: 10
},
{
'label': 'Label 3',
count: 15
}
];
var data2 = [{
'label': 'Label 1',
count: 30
},
{
'label': 'Label 2',
count: 20
},
{
'label': 'Label 3',
count: 9
}
];
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.pie()
.value(function(d) {
return d.count;
})
.sort(null);
var tooltip = d3.select('#chart')
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var dataset = data1;
var isDataSet1 = true;
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
}) // UPDATED (removed semicolon)
.each(function(d) {
this._current = d;
});
var sum = d3.sum(dataset, function(d) {
return d.count;
});
var centerText = svg.append("text")
.attr('class', 'centerText')
.attr('dy', '0.35em')
.attr('text-anchor', 'middle')
.attr('color', 'black')
.text(sum);
var textG = svg.selectAll('.labels')
.data(pie(dataset))
.enter().append('g')
.attr('class', 'labels');
textG.append('text')
.attr('transform', function(d) {
return 'translate(' + arc.centroid(d) + ')';
})
.attr('dy', '.35em')
.style('text-anchor', 'middle')
.attr('fill', '#fff')
.text(function(d, i) {
return d.data.count > 0 ? d.data.count : '';
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = 5 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', 10)
.attr('height', 10)
.style('fill', color)
.style('stroke', color)
.attr('rx', 5)
.attr('ry', 5) // UPDATED (removed semicolon)
.on('click', function(label) {
if (isDataSet1) {
dataset = data2;
} else {
dataset = data1;
}
isDataSet1 = !isDataSet1;
var rect = d3.select(this);
pie.value(function(d) {
return d.count;
});
path = path.data(pie(dataset));
path.transition()
.duration(750)
.attrTween('d', function(d) {
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
});
var sum = d3.sum(dataset, function(d) {
return d.count;
});
svg.select("text.centerText")
.text(sum);
textG.data(pie(dataset));
textG.select("text")
.transition()
.duration(750)
.attr('transform', function(d) {
return 'translate(' + arc.centroid(d) + ')';
})
.text(function(d, i) {
return d.data.count > 0 ? d.data.count : '';
});
});
legend.append('text')
.attr('x', 13 + legendSpacing)
.attr('y', 13 - legendSpacing)
.text(function(d) {
return d;
});
})(window.d3);
#chart {
margin: 0 auto;
position: relative;
/*height: 360px;
width: 360px;*/
}
.tooltip {
background: #eee;
box - shadow: 0 0 5 px #999999;
color: # 333;
display: none;
font - size: 12 px;
left: 130 px;
padding: 10 px;
position: absolute;
text - align: center;
top: 95 px;
width: 80 px;
z - index: 10;
}
.legend {
font - size: 12 px;
}
rect {
cursor: pointer;
stroke - width: 2;
}
rect.disabled {
fill: transparent!important;
}
h1 {
font - size: 14 px;
text - align: center;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<h1>Toronto Parking Tickets by Weekday in 2012</h1>
<button type="button" onclick="changeData()">change data</button>
<!-- NEW -->
<div id="chart"></div>
</body>

Tooltip not generating when hovering a pie chart

I am trying to build a pie chart using the d3. I learned the concept from the site click here but when i hover over a part of pie chart the tooltip is not showing
here's my css style code used
#chart {
height: 360px;
margin: 0 auto; /* NEW */
position: relative;
width: 360px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
left: 130px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 80px;
z-index: 4;
}
.legend {
font-size: 12px;
}
rect {
cursor: pointer; /* NEW */
stroke-width: 2;
}
rect.disabled { /* NEW */
fill: transparent !important; /* NEW */
}
and here's the code for the js part
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = 500,
radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
console.log(tooltip);
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label + " " + d.data.value);
});
path.on('mouseover', function(d) { // NEW
var total = d3.sum(dataset.map(function(d) { // NEW
return d.value; // NEW
}));
console.log("mouseover"); // NEW
var percent = Math.round(1000 * d.data.value / total) / 10; // NEW
tooltip.select('.label').html(d.data.label); // NEW
tooltip.select('.count').html(d.data.value); // NEW
tooltip.select('.percent').html(percent + '%'); // NEW
tooltip.style('display', 'block'); // NEW
});
path.on('mouseout', function() {
console.log("mouseout"); // NEW
tooltip.style('display', 'none'); // NEW
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};
it is a function which takes the dataset and the dom element to which the whole pie chart is going to append
and here's a sample dataset
var dataset = [
{ label: 'Abulia', value: 10 },
{ label: 'Betelgeuse', value: 20 },
{ label: 'Cantaloupe', value: 30 },
{ label: 'Dijkstra', value: 40 }
];
instead of display: none, display: block thing in css i have also tried to opacity: 1, opacity: 0 thing but still no result.
Thanks in advance

now it's generating here's a working code
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = $(window).height() - 120,
radius = Math.min(width, height) / 2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
dataset.forEach(function(item){
item.enabled = true;
});
/*var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
*/
var color = $rootScope.defaultColorScheme;
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label );
})
.each(function(d) { this._current = d; });
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return (d.enabled) ? d.value : 0;
}));
var percent = Math.round(1000 * d.data.value / total) / 10;
tooltip.select('.label').html(d.data.label.toUpperCase()).style('color','black');
tooltip.select('.count').html(d.data.value);
tooltip.select('.percent').html(percent + '%');
/* //console.log(percent);
//console.log(tooltip.select('.percent')); */
tooltip.style('display', 'block');
tooltip.style('opacity',2);
});
path.on('mousemove', function(d) {
tooltip.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX - 25) + 'px');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
tooltip.style('opacity',0);
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color)
.on('click', function(label) { // NEW
var rect = d3.select(this); // NEW
var enabled = true; // NEW
var totalEnabled = d3.sum(dataset.map(function(d) { // NEW
return (d.enabled) ? 1 : 0; // NEW
})); // NEW
if (rect.attr('class') === 'disabled') { // NEW
rect.attr('class', ''); // NEW
} else { // NEW
if (totalEnabled < 2) return; // NEW
rect.attr('class', 'disabled'); // NEW
enabled = false; // NEW
} // NEW
pie.value(function(d) { // NEW
if (d.label === label) d.enabled = enabled; // NEW
return (d.enabled) ? d.value : 0; // NEW
}); // NEW
path = path.data(pie(dataset)); // NEW
path.transition() // NEW
.duration(750) // NEW
.attrTween('d', function(d) { // NEW
var interpolate = d3.interpolate(this._current, d); // NEW
this._current = interpolate(0); // NEW
return function(t) { // NEW
return arc(interpolate(t)); // NEW
}; // NEW
}); // NEW
}); // NEW
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};

Unable to display the tooltip and arctween transition ata a time in d3 pie chart

Hello I am trying to add arctween transition to my pie chart. I am able to show the tooltips and legends in my pie chart but when I try to add arctween transition to my pie chart the tooltip is not working. How to make this possible to display both the tooltip and the arctween transition in this pie chart.
(function(d3) {
'use strict';
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 3;
var legendRectSize = 18;
var legendSpacing = 4;
var data = [
{"IP":"192.168.12.1", "count":20},
{"IP":"76.09.45.34", "count":40},
{"IP":"34.91.23.76", "count":80},
{"IP":"192.168.19.32", "count":16},
{"IP":"192.168.10.89", "count":50},
{"IP":"192.178.34.07", "count":18},
{"IP":"192.168.12.98", "count":30}];
var color = d3.scale.category10();
var svg = d3.select('#chart')
.append('svg')
.attr('width', width+margin.left+margin.right)
.attr('height', height+margin.left+margin.right)
.append('g')
.attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius);
var arcOver = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius + 5);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1*Math.PI)
.endAngle(3.1*Math.PI)
.value(function(d) { return d.count; });
var tooltip = d3.select('#chart')
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d,i) {
return color(d.data.IP);
});
path.on('mouseover', function(d) {
d3.select(this).transition()
.ease("exp")
.duration(3000)
.attrTween("d", tweenPie)
.duration(200)
.attr("d", arcOver)
.style('opacity',0.7)
function tweenPie(b) {
var i = d3.interpolate({startAngle: 1.1*Math.PI, endAngle: 1.1*Math.PI}, b);
return function(t) { return arc(i(t)); };
}
var total = d3.sum(data.map(function(d) {
return d.count;
}));
var percent = Math.round(1000 * d.data.count / total) / 10;
tooltip.select('.label').html(d.data.IP);
tooltip.select('.count').html(d.data.count);
tooltip.select('.percent').html(percent + '%');
tooltip.style('display', 'block');
});
path.on("mouseout", function(d) {
d3.select(this).transition()
.duration(100)
.attr("d", arc)
.style('opacity','1');
tooltip.style('display', 'none');
});
var legend = d3.select("#chart")
.append("svg")
.attr("class", "legend")
.attr("width", radius+50)
.attr("height", radius * 2)
.selectAll("g")
.data(color.domain())
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
})(window.d3);
#chart {
margin-top: 100px;
position: absolute;
margin-right: 50px;
margin-left: 50px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #900C3F;
display: inline-block;
font-size: 12px;
left: 600px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 100px;
z-index: 10;
opacity: 1;
}
rect {
stroke-width: 2;
}
path {
stroke: #ffffff;
stroke-width: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing Pie Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Please help me. Above mentioned are the codes that I have tried yet.
Thanks for help in advance.

You want something like this(http://jsbin.com/guqozu/edit?html,js,output):
.on("mouseover", function(d) {
var htmlMsg="";
div.transition()
.style("opacity", .9);
div.html(
"IP :"+d.data.IP+""+"<br/>"+
"Count : " + d.data.count +"<br/>" + htmlMsg)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
svg.selectAll("path").sort(function (a, b) {
if (a != d) return -1;
else return 1;
});
var endAngle = d.endAngle + 0.1;
var arcOver = d3.svg.arc()
.outerRadius(radius +10).endAngle(endAngle).startAngle(startAngle);
d3.select(this)
.attr("stroke","white")
.transition()
.ease("bounce")
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width",6);
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).transition()
.attr("d", arc)
.attr("stroke","none");
})
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);

var div = d3.select("#toolTip");
var data = [
{"IP":"192.168.12.1", "count":20},
{"IP":"76.09.45.34", "count":40},
{"IP":"34.91.23.76", "count":80},
{"IP":"192.168.19.32", "count":16},
{"IP":"192.168.10.89", "count":50},
{"IP":"192.178.34.07", "count":18},
{"IP":"192.168.12.98", "count":30}];
var width = 300,
height = 300;
var margin = {top: 15, right: 15, bottom: 20, left: 40},
radius = Math.min(width, height) / 2 - 10;
var legendRectSize = 18,
legendSpacing = 4;
var color = d3.scale.category20b();
var arc = d3.svg.arc()
.outerRadius(radius);
var arcOver = d3.svg.arc()
.outerRadius(radius + 10);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.count; });
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var svg = d3.select("#chart").append("svg")
.datum(data)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arcs = svg.selectAll(".arc")
.data(pie)
.enter().append("g")
.attr("class", "arc");
var arcs2 = svg.selectAll(".arc2")
.data(pie)
.enter().append("g")
.attr("class", "arc2");
arcs.append("path")
.attr("fill", function(d, i) { return color(i); })
.on("mouseover", function(d) {
var htmlMsg="";
div.transition()
.style("opacity",0.9);
div.html(
"IP :"+d.data.IP+""+"<br/>"+
"Count : " + d.data.count +"<br/>" + htmlMsg)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
svg.selectAll("path").sort(function (a, b) {
if (a != d) return -1;
else return 1;
});
var endAngle = d.endAngle + 0.1;
var startAngle = d.startAngle - 0.1;
var arcOver = d3.svg.arc()
.outerRadius(radius + 10).endAngle(endAngle).startAngle(startAngle);
d3.select(this)
.attr("stroke","white")
.transition()
.ease("bounce")
.duration(1000)
.attr("d", arcOver)
.attr("stroke-width",6);
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).transition()
.attr("d", arc)
.attr("stroke","none");
})
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
}
var k=0;
arcs2.append("text")
.transition()
.ease("elastic")
.duration(2000)
.delay(function (d, i) {
return i * 250;
})
.attr("x","6")
.attr("dy", ".35em")
.text(function(d) { if(d.data.count >0){ k = k+1; return d.data.count;} })
.attr("transform", function(d) { if (k >1){return "translate(" + labelArc.centroid(d) + ") rotate(" + angle(d) + ")";} else{return "rotate(-360)";} })
.attr("font-size", "10px");
function type(d) {
d.count = +d.count;
return d;
}
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
var legend = d3.select("#chart")
.append("svg")
.attr("class", "legend")
.attr("width", radius+50)
.attr("height", radius * 2)
.selectAll("g")
.data(color.domain())
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.data(data)
.text(function(d,i) { return d.IP; });
#chart {
margin-top: 100px;
position: absolute;
margin-right: 50px;
margin-left: 50px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #900C3F;
display: inline-block;
font-size: 12px;
left: 600px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 150px;
z-index: 10;
opacity: 1;
}
rect {
stroke-width: 2;
}
path {
stroke: #ffffff;
stroke-width: 0.5;
}
div.tooltip {
position: absolute;
z-index: 999;
padding: 10px;
background: #f4f4f4;
border: 0px;
border-radius: 3px;
pointer-events: none;
font-size: 11px;
color: #000;
line-height: 16px;
border: 1px solid #d4d4d4;
}
.legend{
margin-left: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing Pie Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
<div id="toolTip" class="tooltip" style="opacity: 0;"></div>
<script type="text/javascript">
</script>
</body>
</html>
Thank you SiddP for suggesting some useful tips. Based on his codes and my research I have added a legend along with arctween and tooltip to this pie chart to make it complete. I hope this helps someone struggling over D3 pie chart.
Thank you stackoverflow. :}

How to add tooltips in a D3 donut chart

I would like to add tooltips in a D3 donut chart. How can this be done? I would also like to add the percentages for each of the sections in pie chart.
This is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
svg {
padding: 10px 0 0 10px;
}
.arc {
stroke: #000;
}
.arc:hover{
stroke: yellow;
}
.pie:hover {
fill: orangered ;
}
</style>
<body>
<div class = "InfoVis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
var radius = 144,
padding = 20;
var color = d3.scale.ordinal()
.range(["#00ffff", "#00ff00", "#ffbf00", "#fe2ec8", "#bdbdbd", "#3104b4", "#5882fa"]);
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.nutrifacts; });
d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Cereal"; }));
data.forEach(function(d) {
d.nutri = color.domain().map(function(name) {
return {name: name, nutrifacts: +d[name]};
});
});
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", radius * 2)
.attr("height", radius * 2)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".55em")
.text(function(d) { return d; });
var svg = d3.select("body").selectAll(".pie")
.data(data)
.enter().append("svg")
.attr("class", "pie")
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
svg.selectAll(".arc")
.data(function(d) { return pie(d.nutri); })
.enter().append("path")
.attr("class", "arc")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.name); });
svg.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.Cereal; });
});
</script>
Please help me in adding a tooltip to this code and, if possible, add color to the tooltip.

I got idea of your question, but you don't give data.csv file. So I took my own data for drawing donut chart with tooltip. But your are using predefined tooltip, which is given by D3.
var data = [{"age":"1-5","population":2000},
{"age":"6-10","population":1000},
{"age":"11-15","population":3000},
{"age":"16-20","population":1200},
{"age":"21-25","population":900},{"age":"26-30","population":1500},
{"age":"31-35","population":600},{"age":"36-40","population":1200},
{"age":"41-45","population":900}];
var margin = {top:40,left:40,right:40,bottom:40};
width = 650;
height = 650;
radius = Math.min(width-100,height-100)/2;
var color = d3.scale.ordinal()
.range(["#e53517","#6b486b","#ffbb78","#7ab51d","#6b486b",
"#e53517","#7ab51d","#ff7f0e","#ffc400"]);
var arc = d3.svg.arc()
.outerRadius(radius -130)
.innerRadius(radius - 10);
var arcOver = d3.svg.arc()
.outerRadius(radius +50)
.innerRadius(0);
var svg = d3.select("#svgContent").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");
div = d3.select("body")
.append("div")
.attr("class", "tooltip");
var pie = d3.layout.pie()
.sort(null)
.value(function(d){return d.population;});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class","arc")
.on("mousemove",function(d){
var mouseVal = d3.mouse(this);
div.style("display","none");
div
.html("age:"+d.data.age+"</br>"+"population:"+d.data.population)
.style("left", (d3.event.pageX+12) + "px")
.style("top", (d3.event.pageY-10) + "px")
.style("opacity", 1)
.style("display","block");
})
.on("mouseout",function(){div.html(" ").style("display","none");})
.on("click",function(d){
if(d3.select(this).attr("transform") == null){
d3.select(this).attr("transform","translate(42,0)");
}else{
d3.select(this).attr("transform",null);
}
});
g.append("path")
.attr("d",arc)
.style("fill",function(d){return color(d.data.age);});
svg.selectAll("text").data(pie(data)).enter()
.append("text")
.attr("class","label1")
.attr("transform", function(d) {
var dist=radius+15;
var winkel=(d.startAngle+d.endAngle)/2;
var x=dist*Math.sin(winkel)-4;
var y=-dist*Math.cos(winkel)-4;
return "translate(" + x + "," + y + ")";
})
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d){
return d.value;
});
For more clarity, see this link.
This is animated screenshot of this code in action: