D3 Integration with Angular: "Error: Invalid value for <rect> attribute x"

Question

I'm attempting to bind SVG attributes using AngularJS. I have the following code for a resize handle of a shape:

// S handle.
var s_handle = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
    .attr("id", "s-resize")
    .attr("x", "{{(objects['" + id + "'].w - (scope.dragHandle.width / 2))}}")
    .attr("y", "{{(objects['" + id + "'].h - (scope.dragHandle.width / 2))}}")
    .attr(scope.dragHandle)
    .attr("cursor", "s-resize")
    .call(sresize);              

$compile(s_handle.node())(scope);
element.append(s_handle);

When I run this code, I get the following error:

Error: Invalid value for <rect> attribute x="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].w - (scope.dragHandle.width / 2))}}" d3.min.js:1
Error: Invalid value for <rect> attribute y="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].h - (scope.dragHandle.width / 2))}}" d3.min.js:1

I tried removing the append step to isolate the issue - and it looks like the issue actually happens when I set the x and y attributes, even before the Angular compile stage.

Note that I have this method working with another SVG object using the transform attribute, which natively accepts a string.

Has anyone run into this problem before? Are there any solutions? Thank you.

Edit: Been stepping through and it looks like $compile` isn't actually changing the element at all. Could this be because the element is invalid?

user677526 · Accepted Answer · 2013-07-04 14:20:17Z

8

Looks like this was related to this issue: https://github.com/angular/angular.js/pull/2061

It was solved in that issue as well.

SVG elements use an XML-based schema, and are namespaced, and as such have validation rules. Certain attributes can't take an Angular interpolated directive because they expect a numeric value, and the browser validates this before Angular ever has a chance to catch it (even if the element is created and not appended to the DOM yet).

If anyone runs into this issue, hopefully this answer will help.

answered Jul 4, 2013 at 14:20

user677526

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Loer Over a year ago

Thanks, that was really helpful! Just to add a simplified version of the pull request discussion: when you want to do Angular interpolation on attributes of SVG elements, prepend the attribute name with ng-attr-

MaxRocket Over a year ago

Beautiful, thanks! And thanks @ChrisLoer for summarizing. I've been banging my head on this for a few hours until I finally sorted that it was something in this domain. (No pun intended).

Collectives™ on Stack Overflow

D3 Integration with Angular: "Error: Invalid value for <rect> attribute x"

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related