在Angular与d3中渲染数据点数组对应圆形时cx属性报错如何解决？

问题原因 #

你当前的写法属于静态属性赋值，Angular不会解析cx、cy属性引号内的表达式，会直接把"datapoint?.x"这个纯字符串传给SVG的cx属性，不符合SVG对cx属性要求数值长度的规则，所以触发报错。

解决方法 #

使用Angular的属性绑定语法，给需要动态取值的属性外层套上方括号[]，告知Angular需要执行引号内的表达式，将运算结果绑定到对应属性上即可。

修正后的代码如下：

<ng-container *ngFor="let datapoint of datapoints$ | async">
  <svg:circle [cx]="datapoint?.x" [cy]="datapoint?.y" r="5" />
</ng-container>

补充说明 #

• 只有需要动态绑定值的属性才需要加[]，示例中r属性是固定值5，不需要动态取值就可以不用加，直接写静态值即可。
• 你之前尝试调用parseInt不生效，是因为没有加属性绑定标记时表达式根本不会被执行，加了[]之后如果有类型转换需要，直接写在表达式里即可，你的场景下x、y本身就是Number类型，不需要额外做类型转换。

内容的提问来源于stack exchange，提问作者g1wonwon