gpt4 book ai didi

javascript - 如何选择 g 元素中的特定元素并更改其在 D3.js 中的状态

转载 作者:太空宇宙 更新时间:2023-11-04 12:49:03 25 4
gpt4 key购买 nike

我想了解如何在 D3.js 的 SVG Group 元素中选择一个元素。这是我的代码:

<!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>

这段代码创建了两个圆圈。根据上面提供的数组,第一个是绿色,第二个是紫色。我试图通过根据其原始颜色(紫色)选择它来将第二个圆圈的颜色从紫色更改为黑色。

var pickCirlces = circleGroup.selectAll("circle")
.data(circleData,function(d) { return d.color =="purple"; }).transition().duration(1200).style("fill","black");

我无法选择第二个圆圈来更改其颜色,因为这两个圆圈都分组在 g 元素中。谁能帮我做一个简短的解释。非常感谢您的帮助。

最佳答案

给这只猫蒙皮的方法有很多种,但一种常见的方法是过滤数据以供选择:

var pickCirlces = circleGroup.selectAll("circle")
.filter(function(d) {return d.color === "purple"})
.transition().duration(1200)
.style("fill", "yellow")

这是 FIDDLE .

您可以阅读有关此技术的更多信息 here .

关于javascript - 如何选择 g 元素中的特定元素并更改其在 D3.js 中的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26283145/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com