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

各种图书馆都遇到了这个问题（即here）。在 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

这是一个简单的 Shim，可以让它与现有代码一起工作：

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

我没有使用 d3 也有同样的问题。我只使用纯 SVG 并使用 angularJS 控制器将其附加到 DOM 中。问题不在 d3 中。您可以通过在包含链接的元素上将 return false 值添加到 jQuery click 事件处理程序中来解决此问题。

我的 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 回答