Javascript 如何在可缩放的太阳暴流中隐藏外环

我想在Sunburst中隐藏外环，我想在用户钻取Sunburst时显示它。这样我就可以清楚地显示外圈的数据了。。。。提前谢谢

这是我的密码

var width = 700,
    height = width,
    radius = width / 2,
    x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
    padding = 5,
    duration = 1000;
    color = d3.scale.category20c();


    var div = d3.select("#vis");

    div.select("svg").remove();
    div.select("div").remove();
    div.select("p").remove();
    div.select("img").remove();

    var vis = div.append("svg")
        .attr("width", width + padding * 2)
        .attr("height", height + (padding * 2) + 2000)
        .append("g")
        .attr("transform", "translate(" + [radius + padding, radius + padding] + ")");

    /*
    div.append("p")
        .attr("id", "intro")
        .text("Click to zoom!");
    */
    var partition = d3.layout.partition()
        .sort(null)
        .value(function(d) { return 5.8 - d.depth; });

    var arc = d3.svg.arc()
        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
        .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

    var json  = JSON.parse(jsonStr);
    var nodes = partition.nodes({children: json});

     var path = vis.selectAll("path").data(nodes);
    path.enter().append("path")
        .attr("id", function(d, i) { return "path-" + i; })
        .attr("d", arc)
        .attr("fill-rule", "evenodd")
        .style("fill", colour)
        .attr("title",function(d)
        {
            return d.depth ? d.desc: "";
        })
        .on("click", nodeClicked);

    var text = vis.selectAll("text").data(nodes);
    var textEnter = text.enter().append("text")
        .style("fill-opacity", 1)
        .style("fill", function(d) 
        {
            return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
        })
        .attr("text-anchor", function(d) 
        {
            return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
        })
        .attr("dy", ".2em")
        .attr("transform", function(d) 
        {
            var multiline = (d.name || "").split(" ").length > 1,
            angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
            rotate = angle + (multiline ? -0.5 : 0);
            return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
        })
        .attr("title",function(d)
                {
                    return d.depth ? d.desc: "";
                })
        .on("click", showModelDetailsForCriteria);
    textEnter.append("tspan")
        .attr("x", 0)
        .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
    textEnter.append("tspan")
        .attr("x", 0)
        .attr("dy", "1em")
        .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });


    function nodeClicked(d) 
    {
        path.transition()
        .duration(duration)
        .attrTween("d", arcTween(d));

// Somewhat of a hack as we rely on arcTween updating the scales.
    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) 
        {
            var multiline = (d.name || "").split(" ").length > 1;
            return function() 
            {
                var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
                rotate = angle + (multiline ? -0.5 : 0);
                return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + 
                            ")rotate(" + (angle > 90 ? -180 : 0) + ")";
            };
        })
        .style("fill-opacity", function(e) 
        { 
            return isParentOf(d, e) ? 1 : 1e-6; 
        })
        .each("end", function(e) 
        {
            d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
        });
    }

function isParentOf(p, c) 
{
    if (p === c) return true;
    if (p.children) 
    {
        return p.children.some(function(d) 
        {
            return isParentOf(d, c);
        });
    }
    return false;
}

function colour(d)
    {
        var nameStr = d.name;
        if (d.name == 'Danger')
        {
            return "red";
        }
        else if (d.name == 'Stable')
        {
            return "green";
        }
        else if ((d.name !== undefined) && (nameStr.indexOf("Need Ana") >= 0))
        {
            return "orange";
        }
        else if ((d.name !== undefined) && (nameStr.indexOf("Not Mon") >= 0))
        {
            return "grey";
        }
        else
        {
            if (!d.parent)
            {
                return "#fff";
            }

            if (!useRAG)
            {

                if ((d.data.color !== null) && (d.data.color !== undefined) && 
                    ((d.data.color == "red")||(d.data.color == "green")||(d.data.color == "amber")||(d.data.color == "grey")))
                {
                    return d.data.color;
                }
                return color((d.children ? d : d.parent).name);
            }
            if (d.children)
            {
                var    colours = d.children.map(colour);
                var    childCount = d.children.length;
                var    hueAddition = 10;
                for (var    index = 0; index < childCount; index++ )
                {
                    hueAddition += (d3.hsl(colours[index])).h;
                }
                return d3.hsl((hueAddition) / childCount, (d3.hsl(colours[0])).s * 1.2, 
                                                                (d3.hsl(colours[0])).l * 1.2);
             }
             return d.colour || "#fff";
        }
    }

// Interpolate the scales!
function arcTween(d) 
{
    var my = maxY(d),
    xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
    yd = d3.interpolate(y.domain(), [d.y, my]),
    yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
    return function(d) 
    {
        return function(t) 
        { 
            x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); 
        };
    };
}

function maxY(d) 
{
    return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}

// http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function brightness(rgb) 
{
    return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
}
if (top != self) top.location.replace(location);

    function showModelDetailsForCriteria(d)
    {
        var    criterions = d.filter.split(",");
        var    confirmationMessage = "Do you want to view the model list for - ";
        var    startindex = 0;
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            var statusInt = parseInt(criterions[startindex]);
            var statusString = "Not Monitered";

            if (statusInt === 0)
            {
                 statusString = "Stable";
            }
            else if (statusInt == 1)
            {
                 statusString = "Need Analysis";
            }
            else if (statusInt == 2)
            {
                 statusString = "Danger";
        }
            confirmationMessage += "<BR>Health Status  = " + statusString;
            startindex++;
        }
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            confirmationMessage += "<BR>Model Owner = " + criterions[startindex];
            startindex++;
        }
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            confirmationMessage += "<BR>Biz Application = " + criterions[startindex];
            startindex++;
        }
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            confirmationMessage += "<BR>Class of Model = " + criterions[startindex];
            startindex++;
        }
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            confirmationMessage += "<BR>Model Name = " + criterions[startindex];
            startindex++;
        }
        if (criterions[startindex] !== null && criterions[startindex] !== undefined)
        {
            confirmationMessage += "<BR>Product Type = " + criterions[startindex];
            startindex++;
        }

        app.confirm(confirmationMessage, false, 
                                function()
                                {
                                    nodeClicked(d);         
                                },
                                function ()
                                {
                                    //nodeClicked(d);
                                });
    }

var宽度=700，
高度=宽度，
半径=宽度/2，
x=d3.scale.linear（）.range（[0,2*Math.PI]），
y=d3.scale.pow（）.指数（1.3）.域（[0,1]）.范围（[0,radius]），
填充=5，
持续时间=1000；
颜色=d3.scale.category20c（）；
var div=d3。选择（“vis”）；
div.select（“svg”）.remove（）；
div.select（“div”）.remove（）；
div.select（“p”）.remove（）；
div.select（“img”）.remove（）；
var vis=div.append（“svg”）
.attr（“宽度”，宽度+填充*2）
.attr（“高度”，高度+（填充*2）+2000）
.附加（“g”）
.attr（“变换”、“平移”（+[radius+padding，radius+padding]+））；
/*
附加部分（“p”）
.attr（“id”、“简介”）
.text（“单击以缩放！”）；
*/
var partition=d3.layout.partition（）
.sort（空）
.value（函数（d）{return 5.8-d.depth；}）；
var arc=d3.svg.arc（）
.startAngle（函数（d）{返回Math.max（0，Math.min（2*Math.PI，x（d.x））；}）
.endAngle（函数（d）{返回Math.max（0，Math.min（2*Math.PI，x（d.x+d.dx））；}）
.innerRadius（函数（d）{return Math.max（0，d.y？y（d.y）：d.y）；}）
.outerRadius（函数（d）{return Math.max（0，y（d.y+d.dy））；}）；
var json=json.parse（jsonStr）；
var nodes=partition.nodes（{children:json}）；
var path=vis.selectAll（“路径”）.数据（节点）；
path.enter（）.append（“路径”）
.attr（“id”，函数（d，i）{return“path-”+i；}）
.attr（“d”，弧）
.attr（“填充规则”、“偶数”）
.样式（“填充”，颜色）
.attr（“标题”，功能（d）
{
返回d.depth？d.desc:“”；
})
。打开（“单击”，节点单击）；
var text=vis.selectAll（“text”）.数据（节点）；
var textEnter=text.enter（）.append（“文本”）
.style（“填充不透明度”，1）
.样式（“填充”，功能（d）
{
返回亮度（d3.rgb（颜色（d））<125？#eee:“000”；
})
.attr（“文本锚定”，函数（d）
{
返回x（d.x+d.dx/2）>Math.PI？“结束”：“开始”；
})
.attr（“dy”，“.2em”）
.attr（“转换”，函数（d）
{
var multiline=（d.name | |“”）.split（“”）。长度>1，
角度=x（d.x+d.dx/2）*180/Math.PI-90，
旋转=角度+（多行？-0.5:0）；
返回“旋转（“+旋转+”）平移（+（y（d.y）+填充）+”）旋转（+（角度>90？-180:0）+”）；
})
.attr（“标题”，功能（d）
{
返回d.depth？d.desc:“”；
})
。打开（“单击”，显示模型详细信息或标准）；
textEnter.append（“tspan”）
.attr（“x”，0）
.text（函数（d）{返回d.depth？d.name.split（“”[0]：“”；}）；
textEnter.append（“tspan”）
.attr（“x”，0）
.attr（“dy”、“1em”）
.text（函数（d）{return d.depth？d.name.split（“”[1]| |“”：“”）}）；
函数nodeClicked（d）
{
path.transition（）
.持续时间（持续时间）
.attrTween（“d”，arcTween（d））；
//有点像黑客，因为我们依靠arcTween更新天平。
文本样式（“可见性”，功能（e）
{
返回isParentOf（d，e）？null:d3.选择（this）.style（“可见性”）；
})
.transition（）
.持续时间（持续时间）
.attrTween（“文本锚定”，函数（d）
{
返回函数（）
{
返回x（d.x+d.dx/2）>Math.PI？“结束”：“开始”；
};
})
.attrTween（“转换”，函数（d）
{
var multiline=（d.name | |“”）.split（“”）。长度>1；
返回函数（）
{
变量角度=x（d.x+d.dx/2）*180/Math.PI-90，
旋转=角度+（多行？-0.5:0）；
返回“旋转（“+旋转+”）平移（+（y（d.y）+填充）+
）旋转（“+（角度>90？-180:0）+”）；
};
})
.样式（“填充不透明度”，函数（e）
{ 
返回isParentOf（d，e）？1:1e-6；
})
.每个（“结束”，功能（e）
{
d3.选择（this）.样式（“可见性”，isParentOf（d，e）？空：“隐藏”）；
});
}
函数isParentOf（p，c）
{
如果（p==c）返回true；
如果（p.儿童）
{
返回p.children.some（函数（d）
{
返回isParentOf（d，c）；
});
}
返回false；
}
功能色（d）
{
var nameStr=d.name；
如果（d.name==‘危险’）
{
返回“红色”；
}
else如果（d.name=='Stable'）
{
返回“绿色”；
}
else if（（d.name！==未定义）和&（nameStr.indexOf（“需要Ana”）>=0））
{
返回“橙色”；
}
else if（（d.name！==未定义）和&（nameStr.indexOf（“非Mon”）>=0））
{
返回“灰色”；
}
其他的
{
如果（！d.parent）
{
返回“#fff”；
}
如果（！useRAG）
{
如果（（d.data.color！==null）&&（d.data.color！==undefined）&&
（（d.data.color==“红色”）|（d.data.color==“绿色”）|（d.data.color==“琥珀色”）|（d.data.color==“灰色”））
{
返回d.data.color；
}
返回颜色（（d.children？d:d.parent）.name）；
}
如果（d.儿童）
{
var COLORS=d.儿童地图（颜色）；
var childCount=d.childs.length；
var hueAddition=10；
对于（变量索引=0；索引 var path = vis.selectAll("path").data(nodes);
path.enter().append("path")
    .attr("id", function(d, i) { return "path-" + i; })
    .attr("class", function(d) { return "ring_" + d.depth; })   <--- add this line
    .attr("d", arc)
    .attr("fill-rule", "evenodd")
    .style("fill", colour)
    .attr("title",function(d)
    {
        return d.depth ? d.desc: "";
    })
    .on("click", nodeClicked);