Привязать значение атрибута элемента к объекту

Question

Я бы хотел привязать координаты x и y d3 SVGTextElement к объекту в Angular 4, не используя onclick или подобное входное событие.Поскольку координаты элемента меняются, я бы хотел, чтобы значения на объекте отражали текущие значения.По умолчанию d3 связывает ссылки с узлами, но я хотел бы связать свои ссылки с дочерними узлами узлов.

Я исследовал, как это сделать, но мне не удалось найти надежный пример.ngModel для форм, а это не так.«Банан» в «банан в коробке» (без коробки) для событий.Из того, что я могу сказать, события на этих объектах не позволяют отразить текущее значение.Я попытался присвоить идентификаторы каждому из элементов, которые меня интересуют, затем я создал метод получения, который будет извлекать элемент по идентификатору, а затем захватывать значения x и y на каждом тике, но этого не происходит.

Как я могу привязать текущие координаты x и y SVGTextElement к объекту?

Мой текущий шаблон, коллекция детей - это то, к чему я хотел бы привязаться.Наборы узлов и ссылок связаны с координатами через 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>