d3.js - Draw this ring chart with d3js -

i new d3 , trying this. here have done far jsfiddle, don't know how align lines put them in picture , how put information box below chart.

var x=d3.scale.linear().domain([0,r]).range([0,w]) var y=d3.scale.linear().domain([r,0]).range([h,0])  center_group.append('line').attr("x1",x(r/4)).attr("y1",0); center_group.append('line').attr("x1",x(-r/4)).attr("y1",0); center_group.append('line').attr("x1",0).attr("y1",x(25)); center_group.append('line').attr("x1",0).attr("y1",x(-r/4)); 

thanks!

if understand correctly, you're trying align reticle lines within circle. i've created fiddle should demonstrate solution 2 issues in original fiddle.

    //circle svg drawn above point...     center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));     center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));     center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));     center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));     //then include table, shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6 

the first issue lines being drawn before (white-filled) circle (so line within circle covered). second issue lines unbounded, added x2 , y2 attributes needed. see picture link results.

regarding information box, append text element under chart , drop data in there, more robust, include table, shown in example linked in code above (only 2 links allowed apparently).