Javascript 如何在D3 circle pack中使用pack.sort()函数?
我试图理解D3,并用它来做一个词云。。。以下是使用D3 circle pack的代码:Javascript 如何在D3 circle pack中使用pack.sort()函数?,javascript,sorting,d3.js,circle-pack,Javascript,Sorting,D3.js,Circle Pack,我试图理解D3,并用它来做一个词云。。。以下是使用D3 circle pack的代码: var diameter = 560, format = d3.format(",d"), color = d3.scale.category20c(); var bubble = d3.layout.pack() .sort() .size([diameter, diameter]) .padding(.5); var svg = d3.select("body").append("
var diameter = 560,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort()
.size([diameter, diameter])
.padding(.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("data/bubble.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
气泡以随机顺序出现,但我希望它们以排序的顺序出现,比如最左边最大的圆圈,然后右边较小的圆圈,最右边最小的圆圈
如何做到这一点?在这部分代码中:
var bubble = d3.layout.pack()
.sort()// <-- here
.size([diameter, diameter])
.padding(.5);
例如,如果要根据字长进行排序:
function(a, b){
return a.text.length - b.text.length;
}
还有一些
function(a, b){
return a.text.length - b.text.length;
}