Несколько абзацев на одном кружке SVG

Question

В настоящее время я добавляю HTML-абзац к каждому стороннему объекту, который привязан к моим узлам, которые являются кругами на моем графике.

ПОЖАЛУЙСТА, не обращайте внимания на центральный рисунок, мне нужно было указать настоящее имя, представьте, что это обычный текст.

Я хочу иметь возможность добавить дополнительный абзац под моим основным узлом, теперь я знаю, как фильтровать, чтобы просто сосредоточиться на этом главном узле, но я не могу получить два абзаца для использования, мне нужно, чтобы они имели отдельный позиционирование как второе я хочу расположить под узлом, где первое находится в центре.

вот мой код:

  addText(): void {
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()
  .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 => {
    if (node && node.depth !== 0 && node.name && node.name.length > 60) {
      return `<p>${node.name.substring(0, 60)}...</p>`;
    }
    return `<p>${node.name}</p>`;
  })       <--- WHERE THE ORIGINAL WORKING CODE GOES UP TO.
.selectAll('foreignObject.2nd')
.data(this.nodes, node => node)
.enter()
.append('foreignObject')
.attr('class', 'Engagement-GraphNodeLabelTitle')
.attr('x', 0)
.attr('y', 50)
.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')

.html(node => {
  if (node && node.depth !== 0 && node.name && node.name.length > 60) {
    return `<p>${node.name.substring(0, 60)}...</p>`;
  }
  return `<p>${node.name}</p>`;
});

}

Поскольку он просто разрушает график, узлы исчезают, а весь текст сгруппирован в центре.

Я хочу добавить второй абзац и расположить его вокруг той же области, что и у других узлов, есть текст! так потенциально значение y ниже самого иностранного объекта! Спасибо, если вы можете помочь!