How can I add legend and tooltips in this pie chart? - d3.js

Question

How can I add tooltips in this piechart?
`
``
<div>
<button onclick="update(data2006)">2006</button>
<button onclick="update(data2007)">2007</button>
</div>
<select id="selectButton">
<option></option>
</select>
<div id="pie_chart"></div>
<script>
var width = 450;
height = 450;
margin = 40;
var radius = Math.min(width, height) / 2 - margin;
var tooltip = d3
.select('#pie_chart')
.append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
var svg = d3
.select('#pie_chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
var data2006 = {
AsiaMusic: 2,
Movies: 1,
Lifestyle: 1,
Hiphop: 1,
Entertainment: 2,
Actiongame: 1,
Music: 3,
};
var data2007 = {
AsiaMusic: 2,
Movies: 1,
Lifestyle: 1,
Hiphop: 1,
Entertainment: 2,
Actiongame: 1,
Music: 3,
};
function update(data) {
var pie = d3
.pie()
.value(function (d) {
return d.value;
})
.sort(function (a, b) {
console.log(a);
return d3.ascending(a.key, b.key);
});
var data_ready = pie(d3.entries(data));
var u = svg.selectAll('path').data(data_ready);
u.enter()
.append('path')
.merge(u)
.transition()
.duration(1000)
.attr('d', d3.arc().innerRadius(0).outerRadius(radius))
.attr('fill', function (d) {
return color(d.data.key);
})
.attr('stroke', 'white')
.style('stroke-width', '2px')
.style('opacity', 1);
u.exit().remove();
});
}
update(data2006);
</script>
I have been trying to find out the way to put some legend or tooltips in this pie chart but I don't know how to do it. I tried to tool tip and legend in this piechart but I cannot figure it out how to do it
Also, I hope I can know where I can find officical documentation of d3js.