svg, d3, dagre, dagre-d3 및 graphlib는 서로 어떻게 의존합니까?

Question

나는 그래프를 그리기 위해 dagre를 사용했지만 svg, d3, dagre 및 graphlib가 서로 어떻게 의존하는지 이해하려고 노력하고 있습니까? 기본적으로 하나가 멈추고 다른 하나는 시작됩니다.

내가 제한된 이해로 수집 할 수있는 것을 시도해 보겠다.

1. SVG은 : (XML 기반의 벡터 이미지 형식이지만, 기본적으로는) 당신이 원, 타원, 사각형 등을 그릴 다음 그룹이에 g 요소를 사용하거나 할 수있는 사용하여 HTML 태그입니다 더 많은 모양 및 변환 적용 등.

2. d3 : d3은 기본적으로 svg와 데이터를 결합 할 수있는 자바 스크립트 라이브러리입니다. 따라서 매번 svg 태그를 작성하는 대신 기본적으로 프로그래밍, 루프, 데이터 등을 사용하고 svg 코드를 작성합니다.

   지금 내가 위에서 말했다 무엇이든이 가정에 문제가 어떤 의미 :

3. dagre, dagre-D3하게이 곳 dagre-D3와 graphlib이며, dagre 오는 : 이것은 무엇이다 dagre 페이지 ". dagre-D3 라이브러리 D3를 사용하여 실제 렌더링을 제공 dagre하는 프런트 엔드 역할을합니다. dagre은 쉽게 클라이언트 측에 지시 그래프를 배치 할 수 있도록하는 자바 스크립트 라이브러리입니다"라고

   누군가 제게 이것을 설명해 주시겠습니까? 그래서 dagre, dagre-d3 내부에서 d3 함수를 사용할 수 있습니까? 흠 .. 나는 이미 혼란스러워.이 모든 것들이 어떻게 공존하는지 예를 들어 설명해 주겠니? 이 code snippet 생각 날 잡았어 것입니다 : 여기

   var oldDrawNodes = renderer.drawNodes(); 
   renderer.drawNodes(function(graph, root) { 
       var svgNodes = oldDrawNodes(graph, root); 
       svgNodes.each(function(u) { 
       d3.select(this).classed(graph.node(u).nodeclass, true); 
       }); 
       return svgNodes; 
   }); 
   

   , drawNodes는 .classed D3 dagre -하지만 오버 쟁이되고 있으며, 우리는 D3의 기능을 전달하는 (d3.select에서 함수 (이)입니다)를 삽입하십시오. 흠 .. 어떻게 된 일이야? d3.select가 html 요소에만 적용될 수 있다고 생각했습니다. 여기이게 뭐야?

4. graphlib : 이것은 graphlib 페이지이며 multigraphs에 대한 데이터 구조를 제공한다고합니다. 하지만이 라이브러리는 d3 또는 dagre-d3 용으로 제작 되었습니까?

나는 혼란 스럽지만 당신은 그것을 얻는다! 누군가가 내게 어떻게 관련이 있는지, 어떤 기능이 무엇에 사용될 수 있는지에 대한 예를 설명 할 수 있다면, 나는 데리러 갈 수있을 것이다.

감사합니다.

Answer 1

graphlib는 그래프를 나타내는 데이터 구조를 제공합니다. 그것은 레이아웃이나 렌더링을하지 않습니다. 그래서 다음 순수한 graphlib입니다

var g = new Graph(); 
g.setNode(...); 
g.setEdge(...); 

dagre는 노드가 graphlib 그래프로 표시되는 노드의 배치 (x 및 y 위치)를 수행한다. 그것은 렌더링을하지 않습니다. dagre-d3없이 사용자 정의 렌더링을 수행하려는 경우가 아니면 대부분의 경우 직접 호출하지 않을 것입니다.

dagre-d3은 레이아웃에 dagre를 사용하고 d3을 사용하여 렌더링합니다.dagre-d3에는 dagre 및 graphlib가 기본적으로 포함되어 있습니다 (dagreD3.dagre 및 dagreD3.graphlib).

SVG는 d3의 출력 형식입니다. 범용 벡터 그래픽 형식으로 일반적인 HTML을 포함 할 수 있습니다. 각 SVG 노드는 DOM 노드이기도합니다. 이것이 d3.select이 SVG 노드에서도 작동하는 이유입니다.

게시 한 스 니펫은 노드에서 클래스를 설정하기위한 사후 처리를 수행하는 것처럼 보입니다. 링크 된 예제는 그 이후로 업데이트 된 것으로 보이며 더 이상 해당 코드를 포함하지 않습니다.