Invalid method SvgAnimatedString indexOf

Question

I am using d3.js along with angularjs . When you use a hyperlink in an svg object (which is rendered using the angular directive), I get this error.

As per the document here , svgAnimatedString has no specific method. How can i solve this. Can I introduce a method or in any other way.

Part of the code below. Thank you.

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

Answer 1

Various libraries have encountered this problem (for example, here ). In SVG, when you try to get the href binding attribute, it returns SVGAnimatedString . You get the actual string using SVGAnimatedString.baseVal . I do not know how you can do this without fixing Angular, but this will give you an idea of ​​what you need:

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

Answer 2

If you have to deal with a library that does not handle SVG graphics, you can use something like the following to determine the separation on 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); }; 

Answer 3

Here is a simple Shim to make it work with existing code:

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

Answer 4

I have the same problem without using d3. I use only pure SVG and add it to the DOM with angularJS controller. The problem is not d3. You can fix this problem by adding the return value false to the jQuery event handler for elements containing the 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 overload method:

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

Hope this helps ...