Javascript 如何在g元素中选择特定元素并在D3.js中更改其状态
我试图理解如何在D3.js中的SVG组元素中选择一个元素。这是我的代码:Javascript 如何在g元素中选择特定元素并在D3.js中更改其状态,javascript,css,svg,d3.js,Javascript,Css,Svg,D3.js,我试图理解如何在D3.js中的SVG组元素中选择一个元素。这是我的代码: <!DOCTYPE html> <html> <head> <meta charset="US-ASCII"> <title>Insert title here</title> </head> <body> <script src="http://d3js.org/d3.v3.min.js"></script&
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Insert title here</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var circleData = [
{ "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
{ "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
var circleGroup = svgContainer.append("g");
//Add a group to hold the circles
var circleGroup = svgContainer.append("g");
//Add circles to the circleGroup
var circles = circleGroup.selectAll("circle")
.data(circleData).enter().append("circle");
var circleAttributes = circles.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("r", function (d) { return d.radius; })
.style("fill", function (d) { return d.color; });
var pickCirlces = circleGroup.selectAll("circle")
.data(circleData,function(d) { return d.color=="purple";}).transition().duration(1200).style("fill","black");
</script>
</body>
</html>
我无法选择第二个圆来更改其颜色,因为两个圆都分组在g元素中。有人能帮我做一个简单的解释吗。非常感谢您的帮助 给这只猫剥皮有很多种方法,但一种常见的方法是过滤选择数据:
var pickCirlces = circleGroup.selectAll("circle")
.filter(function(d) {return d.color === "purple"})
.transition().duration(1200)
.style("fill", "yellow")
这是你的电话号码
您可以阅读更多有关此技术的信息。非常感谢您的帮助。老实说,我不能完全理解选择在内部是如何工作的。我应该加倍努力去理解它。再次感谢你的帮助。这是一个温和的介绍和我的最爱之一,是一个更沉重的一个。
var pickCirlces = circleGroup.selectAll("circle")
.filter(function(d) {return d.color === "purple"})
.transition().duration(1200)
.style("fill", "yellow")