D3 «Sunburst» Center Размер пути

Question

Итак, у меня есть довольно стандартная диаграмма D3 «Sunburst». Однако центральный путь (т. Е. Корень) слишком велик. Это занимает большую часть моей диаграммы, которая теряется впустую, поскольку более важные дуги вокруг нее борются за космос.

Я собираюсь добавить ярлыки к внешним кольцам, но мне нужно больше места.

См. Ниже.

Я хочу сделать круг центра (светло-серый бит) меньшим, а внешние кольца толще.

Может ли кто-нибудь мне помочь?

Вот мой код:

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 : ""; }); 

Answer 1

Нелинейный отклик в ширину кольца связано с квадратным корнем в г масштабе, в этой строке:

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

Если вы хотите линейный ответ просто измените масштаб на линейный, как в:

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

Затем вы должны увидеть равномерно распределенные кольца.

Answer 2

См. my answer to a similar question.

Вот некоторые демо-изображения, связанные с кольцом шириной: