2012-09-25 2 views
4

과 함께 d3.js을 사용하고 있습니다. Svg 객체 (각도 지시문을 통해 렌더링 됨)에서 하이퍼 링크를 사용하면이 오류가 발생합니다. SvgAnimatedString 메소드가 누락되었습니다.

enter image description here

는 문서 here 당으로, svgAnimatedString는 특정 방법이 없습니다. 어떻게 해결할 수 있을까요? 방법이나 다른 방법으로 주입 할 수 있습니까?

아래 코드의 일부입니다. 감사합니다.

+0

가 보이는 : 여기

// Set a split prototype on the SVGAnimatedString object which will return the split of the baseVal on this // SVGAnimatedString instance SVGAnimatedString.prototype.split = function(){ return String.prototype.split.apply(this.baseVal, arguments); }; 
nrabinowitz

+0

@nrabinowitz 감사합니다. 나는 세부 사항을 생각해 낼 것이다. 나는 각도를 직접 호출하지는 않지만, URL을 구문 분석하려고 할 때 svg 링크를 클릭한다. 다시 한 번 감사드립니다. 다시 연락 드리겠습니다. – bsr

+0

@nrabinowitz http://jsfiddle.net/DEvDe/1/을 찾으십시오. 웹 개발자를 열고 cirlce를 클릭하십시오. 위의 오류를 제공합니다. 감사. – bsr

답변

3

다양한 라이브러리에서이 문제 (예 : here)가 발생했습니다. SVG에서 앵커의 href 속성을 얻으려고하면 SVGAnimatedString을 반환합니다. SVGAnimatedString.baseVal을 사용하여 실제 문자열을 얻습니다. 난 당신이 각도 패치없이이 작업을 수행 할 수 있는지 모르겠지만, 이것은 당신에게 필요한 것을의 아이디어를 줄 것이다 :

this.$$rewriteAppUrl = function(absoluteLinkUrl) { 
    if (absoluteLinkUrl.baseVal != null) { 
     absoluteLinkUrl = absoluteLinkUrl.baseVal; 
    } 
    if(absoluteLinkUrl.indexOf(appBaseUrl) == 0) { 
     return absoluteLinkUrl; 
    } 
    } 
+1

감사합니다. 문제가 제기되었습니다. https://github.com/angular/angular.js/issues/1420 – bsr

+0

'xx.baseVal! = null' 대신'xx.baseVal.hasOwnProperty ('baseVal')'를 사용하는 것이 더 좋습니다 – cuixiping

0

내가 D3를 사용하지 않고 같은 문제가 있습니다. 저는 순수한 SVG만을 사용하고 있습니다. 그리고 angularJS 컨트롤러가있는 DOM에 그것을 추가하고 있습니다. 문제는 d3에 없습니다. 링크가 포함 된 요소에서 jQuery click 이벤트 핸들러에 false 반환 값을 추가하여이 문제를 해결할 수 있습니다. 내 SVG의

부 :

<g id="1" class="node"> 
<a xlink:title="title"> 
<polygon fill="#cccccc" stroke="#cccccc" points="25,-434 25,-457 98,-457 98,-434 25,-434"></polygon> 
<polygon fill="none" stroke="black" points="25,-434 25,-457 98,-457 98,-434 25,-434"></polygon> 
<text text-anchor="start" x="29.5" y="-442.3" font-family="Arial" font-size="14.00">title</text> 
<polygon fill="transparent" stroke="black" points="25,-412 25,-434 98,-434 98,-412 25,-412"></polygon> 
<text text-anchor="start" x="37" y="-419.8" font-family="Arial" font-size="14.00">title</text> 
</a> 
</g> 

jQuery를 오버로드 방법이 도움이

$('g.node').click(function (element) { 
    return false; 
}); 

희망 ...

5

당신은 SVG를 처리하지 않는 라이브러리를 처리해야하는 경우 그래픽의 경우 다음과 같이 SVGAnimatedString에서 split을 정의 할 수 있습니다. 다른 문자열 프로토 타입 방법을 위해 린스하고 반복합니다. 당신이 함수 인수로 다른 뭔가를 기대하는 DOM 요소를 전달하는 것처럼

SVGAnimatedString.prototype.toString = function() { return this.baseVal; } 
2

는 기존 코드와 함께 작업을 진행하는 간단한 심합니다. 그래도 답변을 얻으려면 더 많은 코드를 제공해야합니다. 각도 함수를 어떻게 적용합니까?
관련 문제