d3.layout.pack在排序遞增時堆疊圓圈

Question

我有一個數據集，當按升序排序時，圓最終“堆疊”，但當使用null或降序排序時，它們看起來分布正確。

完整的示例在這里： 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 。

這是執行視頻：

（請注意，在第三次按下按鈕后，圓圈不會恢復到原始順序，但這是由於其他原因沒有直接與原始問題相關聯（這與圓圈包中的升序/降序有關）。

希望這可以幫助。