onclick pie chart

[nitin...@sightlinesystems.com]

hi there, I am new to D3Js. I am trying to add a onclick feature on  a particular slice of the PIE chart and I have written the code for that but when I am alerting in the onclick value I am not getting the expected label for the arc which I have clicked .
for ex : if I have clicked the arc where label is OK the alert shud give OK but the alert is always showing the first label and its value irrespective of the arc portion clicked inside the pie.
Some one please help!!!
Here is my code:

function drawPieChart(data,sectionIndex,chartIndex,column){ /*alert("pie chart data -->"+ $//{QuickChartBean.eventDataBean.chartXML});*/ var w = 180, h = 180, r = 90, // color = d3.scale.category20c(); color= d3.scale.ordinal() .range([ "#FF0000","#FFFF00","#00FF00","#6b486b", "#a05d56", "#d0743c", "#ff8c00","#98abc5", "#8a89a6", "#7b6888"]); /*data = $//{QuickChartBean.eventDataBean.chartXML}*/ data =[ {"label":"Overutilized","value":1}, {"label":"Underutilized","value":1}, {"label":"Ok","value":5} ]; // alert(data); //alert(d3.select('#d3jschart-quickchart').append("svg:svg").data([data]) .attr("width", w) // .attr("height", h).append("svg:g")); var vis = d3.select('#d3jschart'+sectionIndex+chartIndex) .append("svg:svg") .data([data]) .attr("width", w) .attr("height", h) .attr("transform", "translate(" + r + "," + r + ")") .append("svg:g").on("click", function(d,i) { // code you want executed on the click event alert("label-->"+data[i].label + "value-->"+data[i].value+ "sectionIndex="+sectionIndex +"chartIndex="+chartIndex); }) //alert("vis-->"+vis); var arc = d3.svg.arc() .outerRadius(r); //alert("arc -->"+arc); var pie = d3.layout.pie() .value(function(d) { return d.value; }) ; //alert("pie -->"+pie); var arcs = vis.selectAll("g.slice") .data(pie) .enter() .append("svg:g") .attr("class", "slice"); //alert("arcs-->"+arcs); arcs.append("svg:path") .attr("fill", function(d, i) { return color(i); } ) .attr("d", arc) ; //alert("6 arcs-->"+arcs); arcs.append("svg:text") .attr("transform", function(d) { d.innerRadius = 0; d.outerRadius = r; return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d, i) { /*return data[i].label;*/ return ''; }); var legend = d3.select('#d3jschart'+sectionIndex+chartIndex).append("svg") .attr("class", "legend") .attr("width", r * 2) .attr("height", r * 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",function(d, i) { return color(i); } ) legend.append("text") .attr("x", 24) .attr("y", 9) .attr("dy", ".35em") .text(function(d,i) { return data[i].label + "=" +data[i].value }); //alert("7 arcs-->"+ar }

[nitin...@sightlinesystems.com]

Here is the formatted code: