플로팅 데이터 대화 형 네트워크 데모에서 노드에 레이블 추가

Question

Jim에서 공유하는 대화 형 네트워크 데모에 영구적 인 레이블 (노드 이름)을 추가했습니다. (https://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/)

D3 및 커피에서 초보자이기 때문에 D3 및 Coffee 스크립팅을 이해하는 데 많은 시간을 투자 했음에도 불구하고 목표를 달성 할 수 없었습니다. 같은 달성에 도움이 높게 평가 될 것이다

node.enter().append("text") 
.attr("cx", (d) -> d.x) 
.attr("cy", (d) -> d.y) 
.text("text", (d) -> d.name) 

: 다음

는

내가 추가하려고 커피 스크립트입니다.

Answer 1

이 예에서는 D3 v3.x를 사용합니다. 불행하게도, 당신이 원하는 것을 달성하기 위해 당신을 방지 할 수 V 3.x의에서 "마법"이 (text이 cx 또는 cy이 없음을 언급하지 않기 위하여) :

이가있는 node 선택이다 데이터 바인딩 선택 :

node.enter().append("circle") 

그리고 여기에 문제가있는 마법 제공 :

node = nodesG.selectAll("circle.node") 
.data(curNodesData, (d) -> d.id) 

그러나, 다음 줄은

을

enter 및 append은 데이터 바인딩 선택을 수정합니다. 따라서, 이후에 node에 텍스트를 추가하려고하면 실제로 text 요소가 circle 요소에 추가되고 작동하지 않습니다.

해결책 : 원과 텍스트를 모두 추가 할 수있는 SVG 그룹을 만듭니다.