D3.js Sunburst 잘못된 아크 스케일

나는 아크 사이징에 이상한 문제를 보이는 줌 가능 햇살 다이어그램이 있습니다.D3.js 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

감사합니다.

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

가 이상한 아크 규모의 문제를 해결 한 것 같습니다 - 파티션 전화를 변경

출처

2014-11-21 Colin

,이 같은 .sort (널)를 포함한다.

출처

2014-11-21 21:02:52 Colin

D3.js Sunburst 잘못된 아크 스케일

답변

관련 문제