StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POD3 "Sunburst" Center Path Size
text
Body
copied!<p>So I've got a pretty standard D3 "Sunburst" diagram. However, the center path (i.e. the root), is too big. It's taking up a large portion of my diagram that is being wasted as the more important arcs around it struggle for space.</p> <p>I'm about to add labels to the outer rings but I need more space. </p> <p>See below.</p> <p>I want to make the center circle (the light grey bit) smaller and the outer rings thicker. </p> <p><img src="https://i.stack.imgur.com/MNaDa.png" alt="enter image description here"> Can any one help me?</p> <p>Here's my code:</p> <pre><code>var width = 850, height = 700, padding = 6, duration = 750, labelLimit = 120, radius = Math.min(width, height) / 2 - 10; var x = d3.scale.linear() .range([0, 2 * Math.PI]); var y = d3.scale.sqrt() .range([0, radius]); var svg = d3.select("#wheel") .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("id", "scan") .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")"); var partition = d3.layout.partition() .value(function(d) { return d.size; }); var arc = d3.svg.arc() .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function(d) { return Math.max(0, y(d.y)); }) .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); var path = svg.selectAll("path") .data(partition.nodes(bp.data.preparedData)) .enter() .append("path") //.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring .attr("d", arc) .attr("id", function(d) { return d.ci_type === 'type' || d.ci_type === 'provider' ? d.name : ''; }) .attr("class", 'context') .attr("data-toggle", 'context') .attr("data-target", '#context-menu') .attr("data-name", function(d) { return d.name; }) .attr("data-type", function(d) { return d.type; }) .attr("data-provider", function(d) { return d.provider; }) .attr("data-ci_type", function(d) { return d.ci_type; }) .style("fill", function(d) { return bp.draw.getColor(d); }); var text = svg.selectAll("text") .data(partition.nodes(bp.data.preparedData)); var textEnter = text.enter() .append("text") .style("fill-opacity", 1) .style("font-weight", 200) //.style("letter-spacing",1) .style("fill", function(d) { return bp.draw.getLabelColor(d); }) .attr("font-size", function(d) { return d.ci_type === 'type' ? 12 : 16}) .attr("text-anchor", function(d) { return x(d.x + d.dx / 2) > Math.PI ? "end" : "start"; }) .attr("dy", ".2em") .attr("transform", function(d) { var multiline = (d.name || "").split(" ").length > 1, angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90, rotate = angle + (multiline ? -.5 : 0); return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"; }) .attr("class", 'cursor') .attr("data-toggle", 'context') .attr("data-target", '#context-menu') .attr("data-name", function(d) { return d.name; }) .attr("data-type", function(d) { return d.type; }) .attr("data-provider", function(d) { return d.provider; }) .attr("data-ci_type", function(d) { return d.ci_type; }) textEnter.append("tspan") .attr("x", 0) .text(function(d) { return d.depth ? d.name : ""; }); </code></pre>

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