将div与SVG元素对齐

Question

我试图将div添加到图形上节点（圆形）的中心。

ForeignObjects当前用于将文本添加到节点，我想在中心添加一个图标（将其绑定，附加）-似乎所有文本似乎都绑定到了节点，我无法在这里做！

我想在左侧的中心位置找到一个图标。我只是不理解其他异物是如何工作的，并如何附加到其他圆节点上（这些文本都在异物之内，就像您现在在代码中看到的那样）

此代码的第一部分分配文本，第二部分是我尝试分配图标。

addInsightText(): 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()
  .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 => {
    if (node && node.depth !== 0 && node.name && node.name.length > 60) {
      return `<p>${node.name.substring(0, 60)}...</p>`;
    }
    return `<p>${node.name}</p>`;
  })
this.group
  // .selectAll('foreignObject')
  .data(this.nodes, node => node)
  .enter()
  .filter(node => !node.parent)
  .append('foreignObject')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', node => node.depth === 0 ? node.nodeRadius * 2 : this.labelWidth)
  .attr('height', node => this.nodeHeight(node))
  .append('xhtml:div')
  .html(`<div class ="insightIcon"> </div>`
  )

 }

我真的很努力地使第二个异物变得正确或理解初始部分。