我正在扩展 d3 可缩放 Sunburst,特别是Coffee Flavor Wheel:
...具有相对较大的数据集(大约 1200 个节点)。我添加了这样的标签:
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
return "rotate(" + angle + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", click);
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) {
return d.type != "root" ? d.name : "";
});
// Add label or not according to its size.
textEnter.style("opacity", function(e) { var hgt = e.dx*Math.PI*2*y(e.y + e.dy/2); return hgt < 5 ? 0 : 1;});
在 click(d) 函数中:
text
.style("visibility", function(e) {
return isParentOf(d, e) ? null : d3.select(this).style("visibility");
})
.transition()
.duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90;
return "rotate(" + angle + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
.style("opacity", function(e) { var hgt = (e.dx/d.dx)*Math.PI*2*(y(e.y + e.dy/2) - y(d.y)); return hgt < 5 ? 0 : 1;})
.each("end", function(e) {
d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});
问题是当我添加此功能时,整个 Sunburst 加载速度非常缓慢,并且点击转换根本不会非常平滑地交换。如何优化此代码以使其加载更快?
更新:
我设法通过从Coffee Flavor Wheel更改为Zoomable Sunburst with Labels示例解决了这个问题。我不完全确定为什么另一个让它更快。我怀疑它与 attrTween 和Zoomable Sunburst with Labels中的过渡使它更合适。