d3.js - Donut chart with tick mark lines (d3) -

-

i have 3 donut charts

var data = [ { institution: [53245, 28479, 19697, 24037, 40245] }, { institution: [45, 9, 127, 37, 11] }, { institution: [3245, 88479, 45697, 1037, 77245] } ]

var width = 100,     height = 100,     radius = math.min(width, height) / 2;  var color = d3.scale.category20();  (index = 0; index < data.length; ++index) {      var pie = d3.layout.pie()         .sort(null);      var arc = d3.svg.arc()         .innerradius(radius - 30)         .outerradius(radius - 5);      var svg = d3.select("body").append("svg:svg")         .attr("width", width)         .attr("height", height)         .append("g")         .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");      var path = svg.selectall("path")     .data(pie(data[index].institution))   .enter().append("path")     .attr("fill", function(d, i) { return color(i); })     .attr("d", arc); }

for each segment in each chart need short line , label value, example hereenter image description here

is there simple solution this?

here solution:

var data = [     {         institution: [53245, 28479, 19697, 24037, 40245]     },     {         institution: [45, 9, 127, 37, 11]     },     {         institution: [3245, 88479, 45697, 1037, 77245]     } ];  var width = 200; var height = 200; var radius = math.min(width, height) / 4; var r = radius; var textoffset=5;  var colours = ['#ffc400','#e53517','#7ab51d','#009fda','#c2c2c2'];  (index = 0; index < data.length; ++index) {     var pie = d3.layout.pie().sort(null);      var arc = d3.svg.arc().innerradius(radius - 30).outerradius(radius - 5);      var svg = d3.select("body").append("svg:svg")     .attr("width", width)     .attr("height", height)     .append("g")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");      var piedata=pie(data[index].institution);      var ticks = svg.selectall("line").data(piedata).enter().append("line");     ticks.attr("x1", 0)     .attr("x2", 0)     .attr("y1", -radius+4)     .attr("y2", -radius-2)     .attr("stroke", "gray")     .attr("transform", function(d) {       return "rotate(" + (d.startangle+d.endangle)/2 * (180/math.pi) + ")";     });      var labels = svg.selectall("text").data(piedata).enter().append("text");     labels.attr("class", "value")     .attr("transform", function(d) {        var dist=radius+15;        var winkel=(d.startangle+d.endangle)/2;        var x=dist*math.sin(winkel);        var y=-dist*math.cos(winkel);        return "translate(" + x + "," + y + ")";     })     .attr("dy", "0.35em")     .attr("text-anchor", "middle")     .text(function(d){       return d.value;     });      var path = svg.selectall("path")         .data(piedata)           .enter().append("path")         .attr("fill", function(d, i) { return colours[i]; })         .attr("d", arc); }

Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more