StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've seen your json data structure here: <a href="http://mikeheavers.com/transfers/projects/data/projects.json" rel="noreferrer">http://mikeheavers.com/transfers/projects/data/projects.json</a>. Firstly, in order to group the data and append the tag correctly, it'll be better to change your data like this: <a href="https://raw.github.com/gist/4172625/4de3e6a68f9721d10e0068d33d1ebb9780db4ae2/flare-imports.json" rel="noreferrer">https://raw.github.com/gist/4172625/4de3e6a68f9721d10e0068d33d1ebb9780db4ae2/flare-imports.json</a> to create a hirarchical structure.</p> <p>We can then use the groups to draw the arcs.</p> <p>First we create groups by "selectAll" and filter your nodes. Here you could add other group names of your data:</p> <pre><code>var groupData = svg.selectAll("g.group") .data(nodes.filter(function(d) {return (d.key=='Jobs' || d.key == 'Freelance' || d.key == 'Bayard') && d.children; })) .enter().append("group") .attr("class", "group"); </code></pre> <p>I just checked that in my case, so you'd better verify the result of the filter and make change according to your case (our data structure is a little bit different).</p> <p>Now we got a list of groups. Then we'll go through the children of each group, and choose the smallest and largest x as the start and end angle. We can create a function like this:</p> <pre><code>function findStartAngle(children) { var min = children[0].x; children.forEach(function(d){ if (d.x < min) min = d.x; }); return degToRad(min); } </code></pre> <p>And similarly a findEndAngle function by replacing min by max. Then we can create the arcs' format:</p> <pre><code>var groupArc = d3.svg.arc() .innerRadius(arcData[0].rI) .outerRadius(arcData[0].rO) .startAngle(function(d){return findStartAngle(d.children);}) .endAngle(function(d){return findEndAngle(d.children);}); </code></pre> <p>Then we can create arcs in "dynamic" way:</p> <pre><code>svg.selectAll("g.arc") .data(groupData[0]) .enter().append("arc") .attr("d", groupArc) .attr("class", "arc") .append("svg:text") ...; </code></pre> <p>In my case it is groupData[0], maybe you should check it in your case. For adding tags to arcs you just need to add d.key or d.name according to the result of your selection.</p> <p><img src="https://i.stack.imgur.com/pSbPO.png" alt="the arc example"></p> <p>The full code is available here: <a href="https://gist.github.com/4172625" rel="noreferrer">https://gist.github.com/4172625</a>. Every time I get json from database so if there's no dynamic way to generic arcs I will be dead :P Hope it helps you!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload