D3.js를 사용하는 레이블이 지정된 레이아웃의 레이블에 어안 효과를 추가 할 수 없습니다.

밀도가 높은 URL 네트워크의 현재 레이블이 지정된 레이아웃 레이아웃 D3 시각화에 fisheye 효과를 적용하는 데 어려움이 있습니다. 어도비를 노드와 연결 링크에 성공적으로 적용하기 위해 기존 코드를 여러 번 변경할 수 있었지만 연결된 노드 레이블에 코드 스 니펫을 사용하려고하면 모든 것이 작동하지 않습니다. 필요한 노드/링크를 작성,D3.js를 사용하는 레이블이 지정된 레이아웃의 레이블에 어안 효과를 추가 할 수 없습니다.

[{"url":"http:\/\/understandblue.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"1","category":"1"}, {"url":"http:\/\/paperfriendly.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"1"}, {"url":"http:\/\/4pawsforever.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"en.wikipedia.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"http:\/\/test9.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"2"}, {"url":"http:\/\/www.creativecommons.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"http:\/\/someniceblog.typepad.com","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"2"}, {"url":"http:\/\/autismhelp.org","parentURL":"http:\/\/someniceblog.typepad.com","level":"3","category":"3"}]

이 자바 스크립트 코드가 JSON 파일을 읽기 위해 현재 사용되는 :

이

그래프를 채우는 데 사용되는 샘플 JSON 파일 (조밀하지 데이터)입니다/레이블 및 어안을 적용합니다.

<!DOCTYPE html> 
<html> 
    <head> 

     <title>Visualization</title> 

     <!-- D3 Scripts ---> 
     <!-- <script src="d3.v2.js"></script> ---> 
     <script src="d3.js"></script> 
     <script src="d3.min.js"></script> 
     <script src="fisheye.js"></script> 
     <script src="drawVisual.js"></script> 

    </head> 

    <body> 

     <div id="forcedLayoutGraph"> 

     </div> 
    </body> 
</html>

내가 어떻게 코드의 anchornodes/링크 어안를 추가하지 않습니다 JavaScript code generating the visualization

이 는 HTML 페이지입니다. 누군가가 나를 고칠 수 있을까요?!

편집 : 페이지의 HTML 코드를 업데이트했습니다. 다음은 여기에서 사용되는 모든 JS 파일에 대한 공용 링크입니다. 나는 JSFiddle을 동일하게 만들기 위해 노력했지만 JSON 파일을 외부 리소스로 제공 할 수 없기 때문에 작동하지 못한다. (나는 그 방법을 모른다). 관련 자바 스크립트와 JSON 파일에

링크 :

GraphPage D3 D3 min fisheye drawVisual JSON db sample

이것은 시각화 지금과 같은 방법 :

enter image description here

기본적으로

, 현재와 코드의 버전 (라에 대한 힘을 포함) 노드에 bels) 모든 노드와 레이블은 페이지의 왼쪽 위 모서리에 그려지고 중간에 링크가 있습니다. 어안 효과는 링크에서 작동하지만 노드 + 레이블에는 적용되지 않습니다.

출처

2014-12-01 Darth Coder

코드가 전혀 작동하지 않습니다. 완벽한 예제를 제공해 주시겠습니까? 가능한 한 jsfiddle 같은 것이 있습니까? –

@LarsKotthoff JsFiddle을 만들려고했지만 자원으로 JSON 파일을 읽을 수 없습니다 (현재 전체 코드베이스가 호스팅되어 로컬 서버 및/또는 DropBox에서 실행 중입니다). 관련 파일을 모두 추가 했으므로이 파일이 제대로 작동하는 데 도움이되기를 바랍니다. –

'g '요소의 위치를 설정하면됩니다 : http://plnkr.co/edit/CGaMnDOY8to1VBnXBfUb?p=preview –

하기는 별도로 텍스트와 노드 요소의 위치를 설정하고 있지만, 모든 당신은 그들이에 포함 된 g 요소의 위치 설정 수행해야합니다

node.attr("transform", function(d) { 
    return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; 
});

전체 예제 here합니다.

출처

2014-12-13 12:04:14

D3.js를 사용하는 레이블이 지정된 레이아웃의 레이블에 어안 효과를 추가 할 수 없습니다.

답변

관련 문제