모델링 도구의 일부인 "HTML5"에 (복잡한 대화 형) 네트워크 다이어그램을 구현하려는 경우 올바른 방법은 무엇입니까? 예를 들어 사용자 디자인 워크 플로우?HTML 5 : 복잡한 네트워크를 구현하는 방법
SVG는 올바른 접근 방식입니까, 아니면 Javascript/Canvas?를 직접 사용합니까? 거기에 어떤 생산적인 응용 프로그램이 있습니까, 이는 HTML5 (네트워크 모델은 상당히 복잡 할 수 있습니다), 특히 성능에 관한 것으로 입증되었습니다? 당신이 HTML5에서이 작업을 수행하기 위해 '강제'될 경우
내가합니다 ... '올바른'기술,
감사를 다만 힌트를 어떤 구현 세부 사항이 필요하지 않습니다.
이제 svg는 ie9에서 지원됩니다. 캔버스는 대부분의 최신 브라우저에서 지원되며 CSS는 모두가 지원합니다.
svg는 확장 가능한 장점이 있습니다 ('이미지'는 벡터지도이므로 사용자가 선호하는 모든 크기에서 사용할 수 있습니다). 그러나 렌더링 된 beeing의 성능은 약간 엉성합니다. 일부 이벤트를 요소에 바인딩 할 수 있습니다.
캔버스는 GDLib 또는 ImageMagick과 유사하므로 사용자는 흰색 시트를 사용하여 그림을 그릴 수 있습니다. 따라서 변경 작업을 수행하려면 먼저 캔버스를 지우고 모든 것을 다시 그려야합니다. 사용자가 클릭 한 요소를 알지 못하고 전체 캔버스 요소에 대해 일반적으로 이벤트 만 바인딩 할 수 있습니다.
CSS를 사용하여 HTML과 DOM을 사용하면 네트워크 arround의 요소를 움직일 수 있고 네트워크의 노드에 이벤트를 바인딩 할 수 있기 때문에 대안이 될 수 있습니다. 하지만 라인을 구현하는 것은 꽤 어렵습니다. (테두리가있는 회전 된 div를 사용할 수 있습니다)
저는 개인적으로 svg와 일반 html 사이의 하이브리드로 갈 것입니다. 그러나 다시 한 번 당신의 모든 유스 케이스를 알지 못합니다. 신청.
감사합니다 ... 나는 또한 SVG와 캔버스를 비교하는 intersting 기사를 발견했습니다. http://css.dzone.com/articles/how-choose-between-canvas-and – Marco
플래시를 사용하면 호환성과 성능면에서 모두 유리합니다. 하지만 그건 나 뿐이야. –
그래, 분명히 : 문제는 어떤 이유로 든 다른 기술을 선택할 자유가없는 맥락입니다. – Marco