D3.js

Question

몇 달 전에, 나는 combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree using d3.js

내가 HEB에서 시작 시도하고로 만들려고 나무. 상황이 내가 원하는대로되지 않았기 때문에 접을 수있는 방사형 트리 (Reingold Tilford가 아닌)에서 다른 각도로 시작하는 것이 더 낫다는 것을 깨달았습니다.

Here is a JSFiddle of the radial tree

데이터 모델

또한, 변경된 요소는 이제 이름을 가지고, 아이들과 수입 (링크).

var flare = 
{ 
    "name": "root", 
    "children": [ 
     { 
      "name": "test1.parent1","children": [ 
       {"name": "test1.child11","children": [ 
        {"name": "test1.child111"}, 
        {"name": "test1.child112"} 
       ]} 
      ],"imports": ["test2.parent2","test3.parent3","test4.parent4"] 
     }, 
     { 
      "name": "test2.parent2","children": [ 
       {"name": "test2.child21"}, 
       {"name": "test2.child22"}, 
       {"name": "test2.child28","children":[ 
        {"name": "test2.child281"}, 
        {"name": "test2.child282"} 
       ]} 
      ],"imports": ["test3.parent3"] 
     }, 
     {"name": "test3.parent3","imports": ["test4.parent4"]}, 
     { 
      "name": "test4.parent4","children": [ 
       {"name": "test4.child41"}, 
       {"name": "test4.child42"} 
      ] 
     } 
    ] 
}; 

내가 현재 JSFiddle와 마이크 Bostock에서 non-interactive Hierarchical edge bundling을 결합하고 싶은 천천히 시작하지만 상호 작용 나중에 그것의 일부가 될 것을 염두에두고합니다.

또한

, 첫 번째 단계는 다음과 같습니다 (내가 원하는 결과)로 링크 (부모 - 부모 링크)를 가지고 있습니다

나의 현재 가장 큰 문제는 HEB 더를 가지고 있다는 것입니다 없습니다 "루트"하지만 트리는 단일 항목으로 시작합니다. 그래서 지금까지 내가 시도한 모든 것이 나무의 중심에서 큰 혼란을 일으켰습니다.

트리의 가운데에는 레벨 1 링크의 루트를 감싸는 원이 있으므로 레벨 1 (부모)부터 트리가 시작됩니다.

var circle = svg.append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", diameter - 725.3) 
    .style("fill", "#F3F5F6") 
    .style("stroke-width", 0.2) 
    .style("stroke", "black"); 

이상적으로, 부모 사이의 링크는 레벨이 붕괴 (UN) 때 업데이트 할 필요는 노드와 레벨 사이의 링크를 않습니다,하지만 그건 나중에 올 수 있으며, 처음 이후 어려운되지 않을 수도 있습니다처럼 쇼에 첫 번째 수준의 링크를 받고. 또한 필요한 경우 데이터 템플릿이 변경 될 수 있지만 3 가지 정보 (이름, 하위 및 가져 오기)가 모두 중요합니다.

이렇게하는 또 다른 방법은 루트 부분을 포함하지 않도록 데이터를 변경할 수 있고 정확하게 수행하는 것입니다. 부분 응답도 환영합니다.

Answer 1

Mike Bostock이 제공 한 원래 계층 적 가장자리 번들에있는 코드 부분을 사용하여이 JSFiddle의 요소 사이에 링크를 추가하고 접을 수있는 트리의 방사형 버전에 추가했습니다. 그러나 아이들을 무너 뜨리거나 확장시킬 때 업데이트되지 않습니다! 다음에 update(source)

var bundle = d3.layout.bundle(); 

var line = d3.svg.line.radial() 
    .interpolate("bundle") 
    .tension(.85) 
    .radius(function(d) { return d.y; }) 
    .angle(function(d) { return d.x/180 * Math.PI; }); 

:

var middleLinks = packageImports(root); 

svg.selectAll("path.middleLink") 
      .data(bundle(middleLinks)) 
     .enter().append("path") 
      .attr("class", "middleLink") 
      .attr("d", line); 

은 "packageImport"기능

하단에서 찾을 수있다.

function packageImports(json) { 
     var map = {}, 
      imports = []; 

     console.log(json.children); 

     // Compute a map from name to node. 
     json.children.forEach(function(d) { 
     console.log(d.name) 
     map[d.name] = d; 
     }); 

     // For each import, construct a link from the source to target node. 
     json.children.forEach(function(d) { 
     if (d.imports) d.imports.forEach(function(i) { 
      imports.push({source: map[d.name], target: map[i]}); 
     }); 
     }); 

     console.log(imports); 
     return imports; 
    } 

Answer 2

현재 가장 큰 문제는 HEB에는 "루트"가 없지만 트리는 단일 항목으로 시작한다는 것입니다. 그래서 지금까지 내가 시도한 모든 것이 나무의 중심에서 큰 혼란을 일으켰습니다.

루트가 있다고 가정하면 그 노드를 가운데 "노드"로 설정하고 this과 같은 방사형 트리로 설정하지 않으시겠습니까? Here은 다른 예이지만 여러 개의 루트가 있습니다.

당신의 질문에 답할 것 같아도 방사형 나무를 요구하지 않았다고합니다. 당신이 다양한 라듐의 원에 배열 된 것을 유지하기로 결정한다면, 아마도 해결해야 할 문제는 너무 지저분 해 보이는 선의 교차점의 문제 일 수도 있습니다. 이 경우 다른 정렬 알고리즘이 트릭을 수행 할 수 있습니다. Here은 D3.js와 유사한 시나리오에서 다양한 정렬 알고리즘을 사용하여 확장되는 기사입니다. D3 레이아웃 알고리즘은 open source online입니다.

가장 좋은 자료는 this Stack Mathematics Answer입니다. 몇 가지 포인트가 특히 눈에 stand니다 :

1. 연결/분기가 완전히 엉망이 될 수 있지만 대화 형이고 해당 노드 위로 마우스를 가져 가면 특정 노드와의 분기가 켜지는 경우, 여전히 읽기 쉽고 유용한 그래프 일 수 있습니다.
2. 데이터와 잘 작동 할 때까지 다른 정렬 알고리즘을 시도 할 수 있습니다.
3. 하나 이상의 노드를 원 안에 포함 할 수 있습니다.이 경우 루트 노드를 중간에 두는 것이 많은 의미를 가질 수 있습니다. 이 매스 매 티카에서 이후

그것은, 실질적으로 사용할 수있는 대답은 아니지만, 나는 기본 이론과 기법의 설명이 유용하다고 생각합니다.

나무의 뿌리를 가운데에두기를 원하지 않는다면 아마도 부모로부터 뿌리 부모까지 모든 가지를 반투명하게 만들 수 있으며 아마도 다른 색으로 만들 수 있습니다. 이 도움이

희망!