2013-10-11 5 views
0

새내기 질문입니다. 이전 포스트에서 설명했듯이 ActionScript가 기대와 오해로 가득 찬 Flash에서 SVG Land로갑니다.그룹 위치 설정

저는 D3을 사용하여 대화식 그래픽을 만들었으며 거의 ​​끝났습니다. 사용자가 한 상태에서 마우스를 움직일 때 표시되는 작은 팝업 상자를 추가하고 싶습니다. 지금은 무대의 왼쪽에있는 '웨스트 버지니아 "이라는 정적 개체로 나타납니다

http://www.50laboratories.com/miscellany/demographicclout2.html

팝업은 자신의 고유 한 ID를 가진 그룹입니다. 내가 맴돌 았던 상태에 따라 x와 y 위치를 설정할 수 있어야하지만 지금까지는 그 방법을 파악할 수 없습니다. 플래시에서 이름이 지정된 무비 클립처럼 자바 스크립트에서 그룹을 처리 할 수 ​​있어야하지만이 API 참조 (https://github.com/mbostock/d3/wiki/API-Reference)를 방문하면 그룹 객체의 메서드 및 속성에 대한 참조가 표시되지 않습니다. 귀하의 도움에 미리 감사드립니다.

+0

그래서 내가 올바르게 이해한다면 몇 가지 툴팁을 원합니다. 글쎄, [이] (https://groups.google.com/forum/#!msg/d3-js/-1oLMKUez3M/g3UjfyvKQIsJ)의 주제에 대한 논의가 꽤 많이있었습니다. 예를 들어 구글 그룹 토론 그 안에있는 예제들에 대한 링크들). – user1614080

+0

유망 해 보인다. 재밌 네요, 나는 툴팁으로 생각하지 못했지만, 맞습니다. 다음 며칠 동안 링크를 조사하겠습니다. 감사. –

답변

0

actionscript와 달리 svg 요소는 dom 노드이며이를 조작하려면 속성 또는 스타일 속성을 설정해야합니다. dom 노드의 특정 속성/스타일 설정자를 호출하여 이들을 조작 할 수 있지만 d3을 사용하고 있으므로 d3의 설정자를 사용하여 해당 속성/스타일을 설정합니다.

D3가 선택 1. 중일 2. translate([some-x], [some-y])

d3.select("#statepopup").attr("transform", "translate(50,100)"); 

P.S. 그것 transform 속성을 설정하여 사용자가 할당 한 ID함으로써, 소자를 배치하는 방법 transform 속성은 그룹을 크기 조절하고 회전하는 방법이기도합니다.

+0

감사합니다. 이전의 변환 속성에 대한 경험이 있습니다. SVG를 부분적으로 D3하기 전에 transform 속성을 사용하여 barchart에서 막대의 높이와 위치를 설정하려고했습니다. 나는 여기에 질문을 게시 한 후에도 바의 동시 확장 및 배치를 올바르게 수행 할 수 없었습니다. 그래서 D3을 사용하여 ActionScript에서하는 것처럼 높이, x 및 y 속성을 설정할 수 있다는 것을 알게 된 직후에 SVG 방식을 포기했습니다. 이 경우 나는 단지 위치를 지정하고 스케일링하지 않기 때문에 아무런 문제가 없어야합니다. –