2014-09-10 4 views
1

d3.js에서 필요한 것을 얻기 위해 json 데이터를 올바르게 구조화하는 올바른 방법을 찾는 데 어려움을 겪고 있습니다.d3.js 트리 레이아웃을 위해 데이터를 올바르게 마사지하는 방법은 무엇입니까?

내 콘텐츠는 "태그"가 다래 대 관계에있는 "기사"로 이루어져 있습니다. 따라서 기사는 여러 개의 태그를 가질 수 있으며 태그는 여러 개의 기사를 가질 수 있습니다.

나는 그런 방식으로, 노드 트리로 내 콘텐츠를 대표 할

:

The intended visualisation

하지만 지금은, 태그 및 게시물 같은 여러 번 재현 :

the unintended visualisation

& 태그가 중복 된 것을 피하고 대신 올바른 노드를 가리키는 줄을 사용할 수 있습니까? 아니면 이런 종류의 시각화를 달성하기 위해 내 json 데이터를 포맷하는 더 좋은 방법이 있습니까?

내 코드는 this fiddle에서 볼 수 있습니다. 주 부모 노드의 데이터를 표현하기 위해 트리 레이아웃을 사용하는 것이 쉬운 일이 아니다

var json_data= { 
    "name": "Histoire du Web", 
    "children": [ 
     { 
      "name": "américain", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     }, 
     { 
      "name": "american", 
      "type": "tag", 
      "count": "2", 
      "children": [ 
       { 
        "name": "Doug Englebart", 
        "type": "article", 
        "count": 5 
       }, 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     }, 
     { 
      "name": "coding horror", 
      "type": "tag", 
      "count": "1", 
      "children": [] 
     }, 
     { 
      "name": "développeur", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     }, 
     { 
      "name": "Engelbart's Law", 
      "type": "tag", 
      "count": "1", 
      "children": [] 
     }, 
     { 
      "name": "entrepreneur", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     }, 
     { 
      "name": "forum", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     }, 
     { 
      "name": "hypertext", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "Doug Englebart", 
        "type": "article", 
        "count": 5 
       } 
      ] 
     }, 
     { 
      "name": "interaction", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "Doug Englebart", 
        "type": "article", 
        "count": 5 
       } 
      ] 
     }, 
     { 
      "name": "mouse", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "Doug Englebart", 
        "type": "article", 
        "count": 5 
       } 
      ] 
     }, 
     { 
      "name": "stackoverflow", 
      "type": "tag", 
      "count": "1", 
      "children": [ 
       { 
        "name": "jeff atwood", 
        "type": "article", 
        "count": 7 
       } 
      ] 
     } 
    ] 
}; 

답변

1

, 그러나 그것은 가능하며 상세한 설명은 여기에서 찾을 수 있습니다 : 다음에서 https://gist.github.com/GerHobbelt/3683278

여기 데이터입니다 링크 :

물론 잔인한 해킹 다중 부모를 단일 부모로 여러 번 변환하는 부분 트리 복제가 적용될 수 있지만 d3.layout.force와 같은 실제 그래프 레이아웃 메커니즘을 사용하고 적절한 방법을 적용하는 것이 훨씬 더 좋은 옵션 일 수 있습니다 제약 조건으로 원하는대로 할 수 있습니다.

관련 문제