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 。

这是执行视频：

（请注意，在第三次按下按钮后，圆圈不会恢复到原始顺序，但这是由于其他原因没有直接与原始问题相关联（这与圆圈包中的升序/降序有关）。

希望这可以帮助。