2012-02-17 10 views
21

D3에서 그래프를 만들려고합니다. 지금까지는 그것을 좋아하지만 조금 더 붙어 있습니다. 데이터 영역을 유지할 영역과 축 및 레이블을 유지할 영역을 만들고 싶습니다. 그래프를보다 효율적으로 업데이트 할 수 있도록 좀 더 세분화되어 있다고 생각합니다. 그러나 내가 가지고있는 문제는 SVG 내에서 하위 요소를 선택할 수 없다는 것입니다. 여기D3 SVG에서 요소 선택

내가 무엇을 가지고 :

var graph = d3.select('#Graph svg') 
if (graph[0][0] == null){ 
    graph = d3.select('#Graph') 
     .append("svg:svg") 
     .attr("width",width) 
     .attr("height",height) 
     .attr("class","chart"); 
} 

graph.append("svg:g") 
    .attr("id","data") 

는 지금은 데이터 컨테이너를 선택하는 방법을 발견하지 않았습니다. 나는 시도했다

d3.select("#Graph svg data") 

그러나 운 없음. 어떤 아이디어?

+4

만약'id'가'data' 인 것을 선택하고 싶다면'#Graph svg # data'를 선택해야합니다, 맞습니까? – Phrogz

답변

19

이 코드를 사용해 보겠습니다.

d3.select("#Graph svg").selectAll("g") 

"g"는 svg 노드에서 모든 노드 "g"를 선택하는 것을 의미합니다.

0

append으로 데이터 컨테이너를 만들 때 선택 항목을 변수에 저장할 수 있습니다.

은 이미 VAR dataContainer에 저장되기 때문에, 당신이 (당신이 1 라인에 그래프와 함께 수행 한 유사한 방법으로) 선택을 할 필요가 없습니다 이런 식으로 할 경우
var dataContainer = graph.append("svg:g") 
    .attr("id","data"); 

.