Разместите два текста независимо друг от друга

Question

Я пытаюсь добавить два текста. Я хочу, чтобы они были независимы друг от друга, поскольку в настоящее время они мешают друг другу, и поэтому я не могу точно установить их значения «x» и «y». Я добавляю «ForeignObject», в котором они оба, а также некоторые классы. Если я добавлю один с 'у', 0 .. он работает нормально и т. Д. Два из них не работают вместе! Возможно, это потому, что они в одном классе, к сожалению, я новичок, поэтому я не уверен. Мой ожидаемый результат заключается в том, что оба текста привязаны к центральному узлу (см. Фильтр для выбора центрального узла), но могут быть размещены без влияния друг на друга

мой код:

addOrgNameText() {
const length = this.nodes[0] && this.nodes[0].name ? this.nodes[0].name.length : 0;
const expr = length > 50 || this.mainNodeType !== NODE_IMAGE_TYPE.title;
let titleClass = `Engagement-OrganizationTitle--${expr ? 'Small' : 'Big'}`;
titleClass += this.mainNodeType !== NODE_IMAGE_TYPE.title ? ' Engagement-OrganizationTitle--Uncentered' : '';
this.group
  .selectAll('foreignObject')
  .data(this.nodes, node => node)
  .enter()
  .filter(node => !node.parent)
  .append('foreignObject')
  .attr('class', 'Engagement-GraphNodeLabel')
  .attr('x', 0)
  .attr('y', 0)
  .attr('transform', `translate(0, 0)`)
  .attr('width', node => node.depth === 0 ? node.nodeRadius * 2 : this.labelWidth)
  .attr('height', node => this.nodeHeight(node))
  .style('opacity', node => node.visible ? 1 : 0)
  .style('visibility', node => node.visible ? 'visible' : 'hidden')
  .append('xhtml:div')
  .classed('Engagement-GraphNodeLabelText', node => node.depth !== 0)
  .classed('Engagement-GraphOrganizationTitle ' + titleClass, node => node.depth === 0)
  .html(node => {
    return `<p>1ST TEXT</p>`;
  })
  .selectAll('foreignObject')
  .data(this.nodes, node => node)
  .enter()
  .filter(node => !node.parent)
  .append('foreignObject')
  .attr('class', 'Engagement-GraphNodeLabel')
  .attr('x', 50)
  .attr('y', 100)
  .attr('transform', `translate(0, 0)`)
  .attr('width', node => node.depth === 0 ? node.nodeRadius * 2 : this.labelWidth)
  .attr('height', node => this.nodeHeight(node))
  .style('opacity', node => node.visible ? 1 : 0)
  .style('visibility', node => node.visible ? 'visible' : 'hidden')
  .append('xhtml:div')
  .classed('Engagement-GraphNodeLabelText', node => node.depth !== 0)
  .classed('Engagement-GraphOrganizationTitle ' + titleClass, node => node.depth === 0)
  .html(node => {
    return `<p>2ND TEXT</p>`;
  });
}

любая помощь будет принята с благодарностью, я застрял на этом некоторое время.