2011-01-24 4 views
1

그래프 알고리즘과 캔버스 HTML 요소를 배우는 동안 캔버스 요소를 사용하여 그래프를 보여주는 자바 스크립트에서 내 자신의 작은 그래프 라이브러리가 있어야한다는 것을 알게되었습니다. 그래프를 표시하고 내 자신의 작은 lib를 작성하는 방법에 대한 일부 코드 [js/python]을 읽을 수 있습니다.캔버스 요소를 사용하여 그래프를 표시하는 방법

추신 : 나는 가장자리를 의미하고 노드 그레이드는 막대 및 원형 차트가 아닙니다.

+0

* 당신은이 라이브러리를 가지고 있어야하고 당신을 위해 서면으로 바로갔습니다. 또한 파이썬과이 작업은 어떤 관계가 있습니까? –

+0

나는 그것을 독자적으로 쓰고 싶다는 언급은하지 않았다. 그저 다른 사람들이 어떻게했는지 살펴보고 싶었다. 파이썬을 암시한다고 언급했는데, 왜냐하면 파이썬으로 코드를 읽고 나서 내 작은 것을 할 수 있기 때문이다. js/canvas의 버전 –

답변

5

다양한 레이아웃 알고리즘을 사용하여 그래프를 표시하는 데는 몇 가지 방법이 있습니다. 주요한 두 가지는 Force-Directed 레이아웃 알고리즘입니다.이 알고리즘은 푸시 - 풀 원리를 사용하는 연속 레이아웃 알고리즘이 될 수 있습니다. 다음은 가장 적합한 "적합"을 결정하기위한 기초 물리학 접근 방식을 사용하는 GEM 레이아웃 알고리즘입니다.

다음은 몇 가지 예입니다 :

http://vis.stanford.edu/protovis/ex/force.html

bitbucket.org/bwalenz/algorithms/src/

Protovis 아마 대부분의 기능이있다. bitbucket 링크는 GEM 알고리즘의 구현이지만 시각화는 없습니다. 노드/에지를 배치합니다.

2

정말 canvas를 사용하지 않는,하지만 그래프에 매우 좋은 JS 솔루션 : Raphael Charting plugin

라파엘에 대한 좋은 것은 그것이 모든 브라우저에서 작동하고, IE가 포함되어 있습니다.

+1

bar와 pie 차트가 아니라 노드와 에지 그래프를 의미합니다. –

1

큰 LIB는 캔버스 그래픽 : processing.js : http://processingjs.org/ 이것은 당신이 간단한 자바 스크립트 코드를 사용하여 놀라운 시각화를 구축 쓸 수있는 그래픽 라이브러리입니다. 봐라.

관련 문제