d3.layout.pack在排序升序時疊加圓圈

Question

我有一個數據集，當按升序排列時，圓圈最終會「疊加」，但在使用空值或降序排序時顯示爲正確分佈。

完整的例子是在這裏：http://jsfiddle.net/SXLHx/3/。

任何人有一個建議？

    sortItems = function(a,b) { 
     var str,result; 
     switch(sortOrder%3){ 
      case 0: 
       str = 'ascending'; 
       result = a.size - b.size; 
       break; 
      case 1: 
       str = 'descending'; 
       result = b.size - a.size; 
       break; 
      default: 
       str = 'null'; 
       result = null; 
     } 
     document.getElementById("sortLbl").innerHTML = str; 
     return result; 
    }; 

    pack = d3.layout.pack().sort(sortItems); 

一些額外的信息：

我發現，如果我刪除至少兩塊具有的值爲0的塊條目（沒有事，兩個，但它必須是兩個）佈局精細。 http://jsfiddle.net/SXLHx/4/

此外，應用過濾器不與0值追加圈像這樣：

    // Create circles 
    node.append("circle") 
     .filter(function(d){return d.size > 0;}) 
     .attr("r",function(d){return d.r;}); 

不能解決佈局問題。也許我過濾不正確？

Answer 1

你只是在應該設置新訂單並更新佈局的代碼部分中出現了一些錯誤。它應該是這樣的：（它甚至比簡單的什麼是目前的代碼）

pack 
    .sort(sortItems) 
    .nodes({blocks:data}); 

node 
    .attr("transform",function(d){ 
     return "translate("+d.x+","+d.y+")"; 
    }) 
    .selectAll("circle") 
    .attr("r",function(d){return d.r;}); 

我解決了零個值與這條線在包初始化：

.value(function(d){return Math.max(0.01, d.size);}); 

這裏是jsfiddle。

這裏是執行視頻：

（請注意，第三個按鈕按下後，圓不回原來的順序，但是這是由於沒有直接連接其他原因原來的問題（這是關於圈包中的升序/降序））。

希望這會有所幫助。