4

I am very new to d3js. I am trying to adapt the example of the 3 ring doughnut chart posted in the different topic on the forum.

I would need additionally text labels to be displayed on the arcs and an action which would trigger animation and an update of the chart data: http://jsfiddle.net/b88eqqn0/2/

var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j)
          { return arc.innerRadius(innerRadius+(40*j)).outerRadius(innerRadius+40+(40*j))(d); })
.on("mousemove", function(d,i,j){ 
    tooltip.style("left", d3.event.pageX+10+"px");
     tooltip.style("top", d3.event.pageY-25+"px");
     tooltip.style("display", "inline-block");
    tooltip.select("span").text(seriesNames[j]+": " +d.data.name+" " +d.value);
}).on("mouseout",function(){
    tooltip.style("display","none");
}).on("click",function(d,j){

    alert("regenerate chart tween event, aparam:"+d.data.name);
});
});

Is this possible with d3 ? Many thanks !!

DS009
  • 41
  • 2
  • 1
    I have managed to add the labels by updating the code as follows: http://jsfiddle.net/b88eqqn0/4/ – DS009 May 06 '15 at 12:35
  • [code] //text labels var text=svg.selectAll("g.arc") .insert("text") //.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .style("font-size","10px") .style("fill","#000") .attr("dy",20) .append("textPath") .attr("xlink:href",function(d){ return "#yyy"+d.data.name}) .attr("startOffset",2) .text(function(d) { return d.data.name }); //.toFixed(2) [/code] – DS009 May 06 '15 at 12:37

0 Answers0