如何選擇g元素中的特定元素並在D3.js中更改其狀態

我想了解如何選擇D3.js中SVG Group元素內的元素。這是我的代碼：如何選擇g元素中的特定元素並在D3.js中更改其狀態

<!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元素中分組。任何人都可以請幫我做一個簡短的解釋。非常感謝您的幫助。

來源

2014-10-09 user2864315

有很多方法對皮膚這隻貓但一個常用的方法是對數據進行篩選的選擇：

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

這裏是FIDDLE。

你可以閱讀更多關於這項技術here。

來源

2014-10-09 16:21:49 FernOfTheAndes

非常感謝您的協助。說實話，我不能完全理解選擇如何在內部工作。我應該加倍努力去理解它。再次感謝您的幫助。 – user2864315 2014-10-09 16:39:35

是。 [這裏]（http://bost.ocks.org/mike/circles/）是一個溫柔的介紹和我的最愛之一，[這裏]（http://bost.ocks.org/mike/selection/）是一個更重的一個。 – FernOfTheAndes 2014-10-09 16:43:21

如何選擇g元素中的特定元素並在D3.js中更改其狀態

回答

相關問題