为什么添加标签会减慢d3 zoomable Sunburst的速度?

时间:2013-10-31 10:10:48

标签: javascript d3.js label sunburst-diagram

我正在扩展d3 zoomable Sunburst,特别是Coffee Flavor Wheel

enter image description here

...具有相对较大的数据集(约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;}); 

在点击(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 Flavour Wheel更改为Zoomable Sunburst with Labels示例来解决问题。我不完全确定为什么另一个让它更快。我怀疑它与attrTween有关,并且Zoomable Sunburst with Labels中的转换使它更恰当。

0 个答案:

没有答案