将元素属性值绑定到对象

Question

我想将d3 SVGTextElement的x和y坐标绑定到Angular 4中的对象，而不使用onclick或类似的输入事件。随着元素坐标的变化，我希望对象上的值能够反映当前值。默认情况下，d3将链接绑定到节点，但是我想将链接绑定到节点的子节点。

我已经研究了如何做到这一点，但是我找不到一个可靠的例子。 ngModel用于表格，不是。 “盒子里的香蕉”（没有盒子）的“香蕉”用于事件。据我所知，这些对象上的事件不允许反映当前值。我尝试将ID分配给我关心的每个元素，然后创建了一个getter，该ID将通过ID检索元素，然后在每个刻度上获取x和y值，但这似乎没有发生。

如何将SVGTextElement的当前x和y坐标绑定到对象？

我当前要绑定的模板是children集合。节点和链接集合通过d3与坐标绑定：

<div class="svg">
  <svg id="svg2" #svg width="100%" height="100%">
    <svg:g id="root" [appZoomable]="svg">
      <svg:g id="links" *ngFor="let link of links">
        <svg:line class="link"
                  [attr.x1]="link.source.x + (link.source.width / 2)"
                  [attr.y1]="link.source.y + (link.source.height / 2)"
                  [attr.x2]="link.target.x + (link.target.width / 2)"
                  [attr.y2]="link.target.y + (link.target.height / 2)">
        </svg:line>
        <svg:text class="link-name" [attr.x]="(link.source.x + (link.source.width / 2)) / 2 +
                                              (link.target.x + (link.target.width / 2)) / 2"
                  [attr.y]="(link.source.y + (link.source.height / 2)) / 2 +
                            (link.target.y + (link.target.height / 2)) / 2"
                  text-anchor="middle">{{link.name}} ({{link.type}})</svg:text>
      </svg:g>
      <svg:g [appDraggable]="node" [appDraggableInGraph]="graph" *ngFor="let node of nodes">
        <svg:g [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
          <svg:rect class="node" [attr.fill]="node.color"
              [attr.rx]="node.rxy"
              [attr.ry]="node.rxy"
              [attr.width]="node.width"
              [attr.height]="node.height">
          </svg:rect>
          <svg:text class="erdTableName" dx="1.5em" dy="1.5em" text-anchor="start">
            {{node.name}} ({{node.x}},{{node.y}})
          </svg:text>
          <svg:text *ngFor="let child of node.children; let i = index;"
                    [attr.id]="childID" [attr.dx]="'1.5em'"
                    [attr.dy]="(1.5 * (i + 2)).toString() + 'em'" text-anchor="start"
                    (DOMSubtreeModified)="domChanged($event)">
            {{child.name}} ({{child.x}},{{child.y}})
          </svg:text>
        </svg:g>
      </svg:g>
    </svg:g>
  </svg>
</div>