D3.js森伯斯特弧度不正確

Question

我有一個可縮放的森伯斯特圖，它顯示了弧大小方面的奇怪問題。

http://colinwhite.net/Sunburst/

我希望弧的大小與子代數成正比（如工具提示中所示）。 但是，我的父母弧中的孩子很少，這比孩子多得多的同齡人大。 弧的大小不能反映孩子的數量。 我嘗試了其他各種沒有幫助的d3.scales。 我究竟做錯了什么？

我的代碼主要是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; });

似乎已經解決了奇怪的弧度問題。