5

我有一个数据集,当按升序排序时,圆圈最终会“堆叠”,但在使用 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;});

不纠正布局问题。也许我过滤不正确?

4

1 回答 1

4

您只是在应该设置新顺序和更新布局的代码部分中有几个错误。它应该看起来像这样:(它甚至比当前代码中的更简单)

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

以下是执行视频:

在此处输入图像描述

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

希望这可以帮助。

于 2014-05-20T11:19:25.957 回答