我有一个数据集,当按升序排序时,圆圈最终“堆叠”,但在使用 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 的 block 条目(哪两个无关紧要,但必须是两个),布局就很好。 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;});
不纠正布局问题。也许我过滤不正确?
最佳答案
您只是在应该设置新顺序和更新布局的代码部分有几个错误。它应该看起来像这样:(它比当前代码中的内容更简单)
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 .
这是执行视频:
(请注意,在第三次按下按钮后,圆圈不会恢复到原来的顺序,但这是由于与原始问题没有直接关系的其他原因(关于圆圈包中的升序/降序)) .
希望这对您有所帮助。
关于javascript - d3.layout.pack 在升序排序时堆叠圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23699911/