SvgAnimatedString 缺少方法 indexOf答案

【问题标题】：SvgAnimatedString missing method indexOfSvgAnimatedString 缺少方法 indexOf
【发布时间】：2012-09-17 07:44:24
【问题描述】：

我正在使用d3.js 和angularjs。在 svg 对象（通过 angular 指令呈现）中使用超链接时，出现此错误。

根据文档here，svgAnimatedString 没有任何特定方法。我该如何解决这个问题。我可以注入方法或任何其他方式。

下面的部分代码。谢谢你。

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

【问题讨论】：

看起来你正在传递一个 DOM 元素，函数期望其他东西作为它的参数。不过，您将需要提供更多代码才能获得答案 - 您如何应用 Angular 函数？
@nrabinowitz 谢谢。我会想出更多细节。我没有直接调用 angular，当我点击 svg 链接时，它会尝试解析 url。再次感谢，我会尽快回复您。
@nrabinowitz 请找到小提琴jsfiddle.net/DEvDe/1。如果您打开 Web 开发人员，然后单击圆圈。它给出了上述错误。谢谢。
其他方法的类似问题，例如className - 我发送了PR to piwik。

标签： javascript d3.js angularjs

【解决方案1】：

如果你必须处理一个不处理 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); };

【讨论】：

【解决方案2】：

各种库都遇到了这个问题（即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;
    }
  }

【讨论】：

最好使用xx.baseVal.hasOwnProperty('baseVal')而不是xx.baseVal != null

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我没有使用 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;
});

希望这会有所帮助...

【讨论】：