javascript - D3 "Sunburst" Center Path Size - Stack Overflow

admin管理员组

文章数量:1303655

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.

I'm about to add labels to the outer rings but I need more space.

See below.

I want to make the center circle (the light grey bit) smaller and the outer rings thicker.

Can any one help me?

Here's my 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 : ""; });

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.

I'm about to add labels to the outer rings but I need more space.

See below.

I want to make the center circle (the light grey bit) smaller and the outer rings thicker.

Can any one help me?

Here's my 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 : ""; });

• javascript
• d3.js
• sunburst-diagram

Share Improve this question Follow edited Jul 4, 2014 at 3:46 AstroCB 12.4k2020 gold badges5959 silver badges7474 bronze badges asked Oct 8, 2013 at 23:53 CheyneCheyne 2,13744 gold badges2929 silver badges4949 bronze badges 4

• you're passing your inner and outer radius to x and y. Have you looked those? If the differences between each y were roughly the same your outer radius would be proportionally smaller. Think of a plot of y=sqrt(x). – user1614080 Commented Oct 9, 2013 at 2:53
• Can you suggest a code change? i'm not quite understanding how that section works. – Cheyne Commented Oct 9, 2013 at 5:05
• 1 try replacing the var y = d3.scale.sqrt() with var y = d3.scale.linear(). I'm really just guessing without being able to run your code with your data. Are you able to post it on js fiddle or js bin or bl.ocks? – user1614080 Commented Oct 9, 2013 at 7:33
• Brilliant, that fixed it. Now all rings are the same width instead of one giant ball in the center. If you would like to post your response from above as an answer i'll happily accept it. Thank you very much! – Cheyne Commented Oct 9, 2013 at 15:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The non-linear response in ring width is due to the square root in the y scale, in this line:

var y = d3.scale.sqrt()
      .range([0, radius]);

If you want a linear reponse just change the scale to linear as in:

var y = d3.scale.linear()
      .range([0, radius]);

You should then see evenly spaced rings.

本文标签： javascriptD3 quotSunburstquot Center Path SizeStack Overflow