Question

如何使用转换隐藏和显示svg元素？我试试这段代码：

d3.select("#bubble")
	.append("svg")
	.append("g")
	.append("circle")
	.attr("class", "bubble")
	.attr("transform", "translate(100, 100)")
	.attr("r", 50)
	.attr("fill", "black");

d3.select("#buttonHide").on("click", function() {
	d3.select(".bubble").transition().duration(1000).attr('visibility', 'hidden');
});

d3.select("#buttonShow").on("click", function() {
	d3.select(".bubble").transition().duration(1000).attr('visibility', 'visible');
});

<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
	</head>

	<body>
		
		<div id="bubble"></div>
		<div id="buttonHide"><button>Hide</button></div>
		<div id="buttonShow"><button>Show</button></div>
		
	</body>
</html>

{{1}}

但过渡不起作用。

Answer 1

您可以使用opacity样式而不是切换visibility属性：

d3.select("#bubble")
	.append("svg")
	.append("g")
	.append("circle")
	.attr("class", "bubble")
	.attr("transform", "translate(100, 100)")
	.attr("r", 50)
	.attr("fill", "black")
	.style("opacity", 1);

d3.select("#buttonHide").on("click", function() {
	d3.select(".bubble").transition().duration(1000).style("opacity", 0);
});

d3.select("#buttonShow").on("click", function() {
	d3.select(".bubble").transition().duration(1000).style("opacity", 1);
});

<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<script src='https://d3js.org/d3.v5.js' charset='utf-8'></script>
	</head>

	<body>

		<div id="bubble"></div>
		<div id="buttonHide"><button>Hide</button></div>
		<div id="buttonShow"><button>Show</button></div>
		
	</body>
</html>

这样，转换将应用于不透明度，该不透明度将从0转换为1（取消隐藏）或从1转换为0（隐藏）。

设置不透明度：

d3.select(".bubble").transition().duration(1000).style("opacity", 1);

transition实际上是期望可以在两个值之间插值的变化。这是不透明度的情况（一直到0和1之间），而visibility属性是一个简单的开关（开/关）。

使用转换隐藏和显示svg元素

1 个答案: