D3.js солнечные лучи неправильные весы дуги

Question

У меня есть диаграмма Zoomable Sunburst, демонстрирующая странные проблемы с размером дуги.

http://colinwhite.net/Sunburst/

Я ожидаю, что размер дуг будет пропорционален количеству детей (показано во всплывающей подсказке). Тем не менее, у меня есть родительские дуги с небольшим количеством детей, которые пропорционально больше, чем их сверстники с гораздо большим количеством детей. Размер дуги не отражает количество детей. Я пробовал различные другие d3.scale, которые не помогли. Что я делаю неправильно?

Мой код в значительной степени основывается на примерах D3.

var width = 760, height = 700,
    radius = Math.min(width, height) / 2.25,
    color = d3.scale.category20c();

var x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.sqrt().range([0, radius]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

var partition = d3.layout.partition()
    .value(function(d) { return 1; });

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.x))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("opacity", 0);

d3.json("data/getJson.php", function(error, data) {

var treeData = genJSON(data, ['Location', 'Provider', 'Diagnosis', 'Procedure']);

console.log(treeData);

var path = svg.selectAll("path")
    .data(partition.nodes(treeData))
    .enter().append("svg:path")
    .attr("d", arc)
    .style("fill-rule", "evenodd")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .on("click", click)

    .on("mouseover", function(d) {
          tooltip.html(function() {
              return (d.children ? d : d.parent).name + " (" + d.value + ")";
         });
          return tooltip.transition()
            .duration(50)
            .style("opacity", 0.9);
        })
        .on("mousemove", function(d) {
          return tooltip
            .style("top", (d3.event.pageY-10)+"px")
            .style("left", (d3.event.pageX+10)+"px");
        })
        .on("mouseout", function(){return tooltip.style("opacity", 0);});

  function click(d) {
    path.transition()
    .duration(750)
    .attrTween("d", arcTween(d));
  }

});

function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d,i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

JSON вложен с помощью этой функции genJSON - http://colinwhite.net/Sunburst/js/treeRemapper.js

Спасибо за любую помощь или совет.

Answer 1

Изменение вызова раздела, чтобы включить.sort(null), как это -

var partition = d3.layout.partition()
    .sort(null) //<-- was missing this
    .value(function(d) { return 1; });

Кажется, решил странные проблемы масштаба дуги.