D3集成角度：＆QUOT;错误：＆LT值无效; RECT＆GT;属性X'QUOT; [英] D3 Integration with Angular: "Error: Invalid value for <rect> attribute x"

问题描述

我试图绑定属性，SVG使用AngularJS。我有以下的code的形状的调整大小手柄：

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

当我运行这个code，我得到以下错误：

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

我试图消除附加步骤来隔离问题 - 它看起来像当我设置了 X 和是属性，甚至角编译阶段之前。

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.

注意，我这个方法与其他SVG目的是使用了变换属性，它本身接受一个字符串的工作。

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.

编辑：一直踩着通过，它看起来像$ compile`实际上并没有改变的元素都没有。难道这是因为该元素是无效的？

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

推荐答案

看起来这是有关这个问题：<一href=\"https://github.com/angular/angular.js/pull/2061\">https://github.com/angular/angular.js/pull/2061

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元素使用基于XML的模式，并且被命名空间，因此有验证规则。因为他们预期的数值，并在浏览器验证某些属性不能采取角插入指令，在此之前曾经角度有机会赶上它（即使在创建元素，而不是追加到DOM还）。

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.

这篇关于D3集成角度：＆QUOT;错误：＆LT值无效; RECT＆GT;属性X'QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！