2013-01-17 3 views
6

일부 svg 요소의 스타일을 변경하려고합니다. 나는이 작업을 수행 할 때 : 원이 스타일을 변화'selectAll'및 'select'문제로 스타일을 변경하십시오.

var circleSelected = d3.select("#circleid_2"); 
     circleSelected.style("fill", "purple"); 
     circleSelected.style("stroke-width", 5); 
     circleSelected.style("stroke", "red"); 

.

하지만, 내가 할 때 :

var allCircles = d3.selectAll(".circle"); 
     allCircles.forEach(function (circle) { 
      circle.style("fill", "green"); //function(d) { return getNodeColor(d); } 
     }); 

가 오류와 함께 작동하지 않습니다 : 개체 [개체 SVGCircleElement은] 어떤 방법 '스타일'여기

및이 없습니다 내 '원'선언 (이다 주의 : 내가 잘못 무슨

node.append("circle") 
      .attr("id", function (d) { return "circleid_" + d.id; }) 
      .attr("class", "circle") 
      .attr("cx", function (d) { return 0; }) 
      .attr("cy", function (d) { return 0; }) 
      .attr("r", function (d) { return getNodeSize(d); }) 
      .style("fill", function (d) { return getNodeColor(d); }) 
      .style("stroke", function (d) { return getNodeStrokeColor(d); }) 
      .style("stroke-width", function (d) { return getNodeStrokeWidth(d); }); 

을하고있는 중이 야 : 그것은 클래스와 ID)를 모두 가지고? 도와 주셔서 감사합니다!

+1

반복하고 싶다면 각 기능을 사용해야합니다. 다음을 확인하십시오 : https://github.com/d3/d3/wiki/Selections#each 제 경우에는 콜백이 매개 변수를받지 못했습니다. d3.select (this) – camposer

답변

9

시도 :

d3.selectAll("circle").style("fill", "green"); 

또는 :

allCircles.style("fill", "PaleGoldenRod"); 

설명 : https://github.com/d3/d3/blob/master/API.md#selections-d3-selection

: d3.selectAll이 API에 설명 된 기능을 사용하여 작용 할 수있는 선택을 반환합니다 그러나 forEach하자마자 내부 변수 retur 매번 circle은 실제 DOM 요소가 될 것이므로 더 이상 선택이 아니므로 매번 style 기능이 추가되지 않습니다.

+0

interesting .. if if forEach는 DOM 요소를 반환하고 jQuery를 사용하여 스타일을 지정할 수 있습니다. – HotFrost

+0

예, jquery와 d3을 혼합하는 것은 매우 일반적인 방법입니다. – GreySage

관련 문제