SvgAnimatedString missing method indexOf

I am using d3.js together with angularjs. When use hyperlink in svg object(which rendered through angular directive), I am getting this error.

enter image description here

As per the doc here, svgAnimatedString doesn't have any specific method. How can I solve this. Can I inject a method or any other way.

Part of the code below. Thanks you.

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

Various libraries have encountered this problem (i.e here). In SVG, when you try to get the href attribute of an anchor it returns an SVGAnimatedString. You get the actual string by using SVGAnimatedString.baseVal. I don't know how you can do this without patching Angular, but this will give you an idea of what is needed:

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

If you must deal with a library which doesn't handle SVG graphics, you can use something like the following do define split on the SVGAnimatedString. Rinse and repeat for other string prototype methods.

 // 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); };

I have same problem without using d3. I'm using only pure SVG and appending it into DOM with angularJS controller. Problem isn't in d3. You can fix this problem with adding return false value into jQuery click event handler on elements that contains link.

Part of my 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 overloading method:

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

Hope this helps...