2012-12-05 2 views
5

꺾은 선형 차트를 나타내는 큰 SVG 경로 문자열을 생성 중입니다.노드 수를 줄여서 SVG 경로 문자열 단순화

차트 아래에는 시간 범위 슬라이스를 선택하기위한 슬라이더가 있습니다. 슬라이더 뒤에는 전체 꺾은 선형 차트의 미리보기가 있습니다.

현재 미리보기를 생성하기 위해 경로를 축소하고 있습니다. 그러나 이렇게하면 픽셀 당 수십 개의 노드로 끝나기 때문에 더 자세한 정보가 필요합니다. 물론 이것은 브라우저가해야할 것보다 더 많은 렌더링을 제공합니다.

실제로 노드를 줄임으로써 경로를 단순화하는 알고리즘은 거의 없지만 svg 문자열 압축 (gzipping 등)에 대한 정보는 많습니다.

저는 Raphaeljs를 사용하고 있으며 자바 스크립트 기반 솔루션을 찾고 있습니다. 어떤 아이디어?

+0

당신이 경로 'D'속성의 예를해야합니까? 예 : lostsource

+1

큰 "크기"경로를 표시하여 전체 "해상도"경로를 이미로드하고 있습니다. 축소판에 다시 표시 할 때의 성능 저하는 최소화해야합니다 경로를 단순화하는 알고리즘을 갖는 것보다 – Duopixel

+0

@Duopixel : 나는 그것이 사실이라고 생각하지 않는다. 동일한 경로가 DOM에 두 번 나타납니다. 나는 브라우저가 그것을 최적화한다면 매우 놀랄 것이다. 또한 내가 이해하는 바와 같이, 미니 미리보기는 전체 경로와 동일한 종횡비가 아니며 스트로크 너비도 다를 수 있습니다 (전체 크기 차트와 관련하여 약간 더 무겁게 만드는 것이 합리적입니다). –

답변

11

Simplify.js 아마 당신이 찾고있는 것입니다. 당신의 선 차트 감안할 때

은 (는해야 정의에 의해하는), 당신이 그것을 사용할 수있는이 같은 직선 세그먼트로 구성

var tolerance = 3 
    var pathSegArray = [] 
    for (var i=0; i<path.pathSegList.numberOfItems; i++) { 
    pathSegArray.push(path.pathSegList.getItem(i)) 
    } 
    var newPathArray = simplify(pathSegArray,tolerance) 
    var newD = "M"; 
    for (i=0; i<newPathArray.length; i++) { 
    newD += newPathArray[i].x + " " + newPathArray[i].y + " " 
    } 
    path.setAttribute("d",newD) 
+0

불행히도 이것은 Chrome에서 작동하지 않는 것 같습니다. –

+3

Chrome에서 작동하도록 코드가 변경되었습니다. –

+0

커브, A, C, Q, T, S 명령 등에 적합하지 않습니다. – cuixiping

관련 문제