6

私はd3.jsをangularjsと一緒に使用しています。svgオブジェクト（angularディレクティブを介してレンダリングされる）でハイパーリンクを使用すると、このエラーが発生します。

ここに画像の説明を入力してください

こちらのドキュメントによると、svgAnimatedStringには特定のメソッドはありません。どうすればこれを解決できますか。メソッドまたは他の方法を注入できますか？

以下のコードの一部。ありがとうございます。

svg.selectAll("a.node")
                        .data(data)
                        .enter().append("a")
                        .attr("class", "node")
                        .attr("xlink:href", "test")
                        .append("rect")
4

4 に答える 4

6

SVGグラフィックを処理しないライブラリを処理する必要がある場合は、次のようなものを使用して、SVGAnimatedStringで分割を定義できます。他の文字列プロトタイプメソッドについては、すすぎ、繰り返します。

 // 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); };
于 2014-02-06T20:50:00.833 に答える
4

さまざまなライブラリでこの問題が発生しています（つまり、ここ）。SVGでは、アンカーのhref属性を取得しようとすると、が返されますSVGAnimatedString。を使用して実際の文字列を取得しSVGAnimatedString.baseValます。Angularにパッチを適用せずにこれを行う方法はわかりませんが、これにより、何が必要かがわかります。

  this.$$rewriteAppUrl = function(absoluteLinkUrl) {
     if (absoluteLinkUrl.baseVal != null) {
        absoluteLinkUrl = absoluteLinkUrl.baseVal;
     }
    if(absoluteLinkUrl.indexOf(appBaseUrl) == 0) {
      return absoluteLinkUrl;
    }
  }
于 2012-09-25T22:26:06.377 に答える
3

これは、既存のコードで動作させるための簡単なシムです。

SVGAnimatedString.prototype.toString = function () { return this.baseVal; }
于 2015-12-04T21:03:03.653 に答える
0

d3を使用せずに同じ問題が発生します。私は純粋なSVGのみを使用しており、angularJSコントローラーを使用してDOMに追加しています。問題はd3にはありません。リンクを含む要素のjQueryクリックイベントハンドラーにreturnfalse値を追加することで、この問題を修正できます。

私の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;
});

お役に立てれば...

于 2013-07-10T13:31:44.530 に答える