score:3
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:
Source: stackoverflow.com
Related Query
- How to add tooltips in a D3 donut chart
- How to add drop shadow to d3.js pie or donut chart
- d3.js: How to add value below the label in donut chart
- How to add a circle in the middle of donut chart and fill it in d3 js?
- how to add tooltip for donut chart in loop using d3js
- How to Add Multiline Text Tooltips in Bar Chart D3 JS
- How to add text to D3 js donut chart
- how to create labels for data in donut chart using d3.js
- How to add a nice legend to a d3 pie chart
- d3.js How to add lines to a bar chart
- How to add columnn titles in a Sankey chart networkD3
- How to add HTML code to D3 tree chart at node?
- How do I add labels to d3.js force bubble chart
- How to avoid overlapping tooltips of multi-series line chart d3.js
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How to add a line on x-axis on a horizontal bar chart in d3
- Add border-radius property to D3js Donut Chart
- How to add a fixed range vertical line to a D3.js chart
- How to apply tooltips for dc.js chart after chart is rendered
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- How to make a C3 donut chart to a semi circle or a half donut chart in typescript?
- How to add a shape on a chart node in d3.js?
- Donut Pie Chart - Add a Title - NVd3.js
- How to add events to the individual sections(arcs) of a pie chart created out of d3.js?
- How to add background shading to D3 line chart
- Add text in rect svg and append it to arc in donut chart
- How to word wrap the legend text for a donut chart
- How to change color of donut chart created using d3.js?
- How to add circles onto line chart path d3.js
- D3 : How to add labels top of in each bar in grouped bar chart
More Query from same tag
- updating d3 chart with input from form
- create a radial chart with d3.js
- Cleaner and better way to select and change colour of circles in d3
- D3 function to be called on mouse click (weird behaviour)
- Fixed svg in the bottom of a nested svg
- Text along an ark in a circle pack Text placement wrong
- d3.js json uncaught syntax error unexpected token o
- How to pass json directory to the template within the django framework?
- What is D3js version support policy?
- how to iterate over local directory in javascript
- can I target a specific node in d3
- D3 Converting a Stacked Area Graph from tsv to csv using Mike Bostock's example
- JSON data with AngularJS d3
- Javascript/jQuery Update Date
- Why is calling .select() changing my bound data?
- d3 variable equals the string "function(d)", not the value the function returns
- Changing a Json Array in D3 for Bar Chart
- Circles not getting aligned properly on the chart D3 Django
- d3.js -- Axis label help (from v3 to v4)
- D3- Approach for Json nested key-value
- Line chart - how to display data points whilst line path is being drawn
- How to horizontally centre a (responsive) multi-line legend in D3
- Redrawing a D3/SVG chart for printing
- Equal Space between the legends in d3
- D3 - Axis with dates
- Drawing 100 circles with IDs and associating mouse events with them
- How to create a bar chart made up of very small squares
- Dynamically add dimensions to crossfilter
- D3.js fill part of graph with background
- NVD3 / D3.js making xAxis string from date format