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

我有一個Zoomable的森伯斯特圖，表現出弧度大小的奇怪問題。D3.js森伯斯特不正確的弧度

我期望大小的弧正比於兒童（在工具提示示出）的數量。然而，我的父母幾乎沒有孩子，比起擁有更多孩子的同齡人來，他們的比例要大得多。圓弧大小不反映孩子的數量。我嘗試了各種其他沒有幫助的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

感謝任何幫助或建議。

來源

2014-11-21 Colin

更改分區號召，包括的.sort（空）這樣的 -

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

似乎已經解決了這個詭異的弧線尺度問題。

來源

2014-11-21 21:02:52 Colin

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

回答

相關問題