Question

我试图了解如何在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元素内分组。有谁可以帮我做一下这个简短的解释。非常感谢您的协助。

Answer 1

有许多方法可以对这只猫进行换肤，但一种常见方法是过滤选择的数据：

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

这是FIDDLE。

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

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

1 个答案: