<!DOCTYPE HTML><HTMLclass= "Um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"> <Head> <title></title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "target-densitydpi=device-dpi, Width=device-width, initial-scale=1, User-scalable=no, minimum-scale=1.0, maximum-scale=1.0 "> <Linkrel= "stylesheet"href= "Css/fonts/font-awesome.min.css"> <Linkrel= "stylesheet"href= "Css/ui-box.css"> <Linkrel= "stylesheet"href= "Css/ui-base.css"> <Linkrel= "stylesheet"href= "Css/ui-color.css"> <Linkrel= "stylesheet"href= "Css/appcan.icon.css"> <Linkrel= "stylesheet"href= "Css/appcan.control.css"> </Head> <Bodyclass= "UM-VP bc-bg"Ontouchstart> <DivID= "Container"></Div> </Body> <Scriptsrc= "Js/appcan.js"></Script> <Scriptsrc= "Js/appcan.control.js"></Script> <Scriptsrc= "Js/d3.js"></Script> </Body> <Script>Appcan.ready (function() {appcan.initbounce (); }); varColor=D3.scale.category10 (); //Generate random Colors varDataSet= [5, Ten, -, $, 6, -]; varPie=D3.layout.pie (); //pie chart Layout https://github.com/mbostock/d3/wiki/Pie-Layout varW= +; varh= +; varOuterradius=W/ 2; //Outer radius varInnerradius= 0; //Inner radius varArc=D3.svg.arc (). Innerradius (Innerradius). Outerradius (Outerradius); varsvg=D3.select ("Body"). Append ("svg"). attr ("width", W). attr ("Height", h); varArcs=Svg.selectall ("G.arc"). Data (Pie (DataSet)). Enter (). Append ("g"). attr ("class", "Arc"). attr ("Transform", "Translate (" +Outerradius+ "," +Outerradius+ ")"); Arcs.append ("Path"). attr ("Fill", function(d, i) {returncolor (i); }). attr ("D", ARC); Arcs.append ("text"). attr ("Transform", function(d) {return "Translate (" +arc.centroid (d)+ ")"; //position text to the center of the graphic}). attr ("Text-anchor", "Middle")//Center Text. Text (function(d) {returnD.value; }) </Script></HTML>
View Code
D3.js Drawing a pie chart