如何在g元素中选择特定元素并在D3.js中更改其状态
How to select a particular element in g elements and change its status in D3.js
我正在尝试了解如何在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。
你可以在这里阅读更多关于这项技术的信息。
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- HTML 显示/隐藏元素 JS 不起作用
- 定位 d3 上的其他元素.js事件上
- 如何获取
- 元素 js/ajax 的 Id 值
- 从元素 JS 中获取类
- 单击 html 元素 JS
- 数据未追加到车把中的元素.js
- 如何使用节点逐个获取元素.js Cheerio
- MEJS(媒体元素JS)播放功能
- 检测是否在输入元素JS中输入了特殊字符
- 如何根据下拉选择消除HTML表单中的元素?(JS吗?)
- 带有动态链接标记的可满足元素(JS、jQuery)
- 仅为UL的第一个元素(JS或jquery)添加类的样式
- 自动时间元素js
- 可以't获取API响应的特定元素[JS]
- 修改指定li元素JS的父级
- 奇异:CSS转换元素JS "点击通过"
- 通过文本框获取数组元素(JS验证)