D3.js 在d3中显示/隐藏元素
我是D3新手，我正在尝试通过示例学习，我修改了一个示例代码，但我无法做到这一点：在sunburst图表中仅显示两个环，这是代码：D3.js 在d3中显示/隐藏元素,d3.js,sunburst-diagram,D3.js,Sunburst Diagram,我是D3新手，我正在尝试通过示例学习，我修改了一个示例代码，但我无法做到这一点：在sunburst图表中仅显示两个环，这是代码： <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke: #fff; fill-rule: evenodd; } text { font-family: Arial, sans-serif; font-size: 16px; }
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #fff;
fill-rule: evenodd;
}
text {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
// Static dimensions
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
// Dynamic dimensions
width = window.innerWidth;
height = window.innerHeight;
radius = Math.min(width, height) / 2;
const formatNumber = d3.format(',d');
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.pow()
.exponent(0.4)
.range([0, radius]);
var color = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
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, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("structure.json", function(error, root) {
var g = svg.selectAll("g")
.data(partition.nodes(root)
// .filter(function(d) {
// return (d.depth < 2);
// })
)
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click)
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr('display',function(d) {
const CHAR_SPACE = 10;
const deltaAngle = x(d.x1) - x(d.x0);
const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);
const perimeter = r * deltaAngle;
return d.name.length * CHAR_SPACE < perimeter;
}
)
.text(function(d) {
if (d.name.includes("chip")) {
label = '';
}
else {
label = d.name;
}
if (!isNaN(d.value)) {
label = '\n' + label + formatNumber(d.value);
}
return label;
//return d.name;
}
)
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
});
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
</script>
路径{
冲程：#fff；
填充规则：偶数奇数；
}
正文{
字体系列：Arial，无衬线；
字体大小：16px；
}
//静态尺寸
可变宽度=960，
高度=700，
半径=数学最小值（宽度、高度）/2；
//动态尺寸
宽度=window.innerWidth；
高度=窗内高度；
半径=数学最小值（宽度、高度）/2；
常量formatNumber=d3.format（'，d'）；
var x=d3.scale.linear（）
.range（[0,2*Math.PI]）；
变量y=d3.scale.pow（）
.指数（0.4）
.范围（[0，半径]）；
var color=d3.scale.category20c（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+（height/2+10）+”）；
var partition=d3.layout.partition（）
.value（函数（d）{返回d.size；}）；
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，y（d.y））；}）
.outerRadius（函数（d）{return Math.max（0，y（d.y+d.dy））；}）；
d3.json（“structure.json”，函数（错误，根）{
var g=svg.selectAll（“g”）
.data（分区.节点（根）
//.过滤器（功能（d）{
//返回（d.深度<2）；
// })
)
.enter（）.append（“g”）；
var path=g.append（“路径”）
.attr（“d”，弧）
.style（“fill”，函数（d）{返回颜色（（d.children？d:d.parent）.name）；}）
.on（“单击”，单击）
var text=g.append（“文本”）
.attr（“transform”，函数（d）{return“rotate”（“+computeextrotation（d）+”）；}）
.attr（“x”，函数（d）{返回y（d.y）；}）
.attr（“dx”，“6”）//保证金
.attr（“dy”，“.35em”）//垂直对齐
.attr（'display'，函数（d）{
常量字符空间=10；
常数三角洲角=x（d.x1）-x（d.x0）；
常数r=数学最大值（0，（y（d.y0）+y（d.y1））/2；
常数周长=r*三角洲角；
返回d.name.length*字符空间<周长；
}
)
.text（功能（d）{
如果（d.名称包括（“芯片”））{
标签=''；
}
否则{
label=d.name；
}
如果（！isNaN（d值））{
标签='\n'+标签+格式编号（d.value）；
}
退货标签；
//返回d.name；
}
)
功能点击（d）{
//淡出所有文本元素
text.transition（）.attr（“不透明度”，0）；
path.transition（）
.持续时间（750）
.attrTween（“d”，arcTween（d））
.每个（“结束”，功能（e，i）{
//检查动画元素的数据e是否位于d中给定的可视角度范围内
如果（e.x>=d.x&&e.x<（d.x+d.dx））{
//获取关联文本元素的选择
var arcText=d3.select（this.parentNode）.select（“text”）；
//淡入文本元素并重新计算位置
arcText.transition（）持续时间（750）
.attr（“不透明度”，1）
.attr（“transform”，function（）{return”rotate（“+ComputeExtratation（e）+”）}）
.attr（“x”，函数（d）{返回y（d.y）；}）；
}
});
}
});
d3.选择（self.frameElement）.style（“height”，height+“px”）；
//插值比例！
函数arcTween（d）{
var xd=d3.interpolate（x.domain（），[d.x，d.x+d.dx]），
yd=d3.插值（y.域（），[d.y，1]），
yr=d3.插值（y.范围（），[d.y？20:0，半径]；
返回函数（d，i）{
返回i
？函数（t）{返回弧（d）；}
：函数（t）{x.domain（xd（t））；y.domain（yd（t））.range（yr（t））；返回弧（d）；}；
};
}
函数计算拉伸（d）{
返回（x（d.x+d.dx/2）-Math.PI/2）/Math.PI*180；
}
正如您所看到的，我添加了一行
.filter