выравнивание по центру (по вертикали и по горизонтали) многострочного текста в угловом дереве d3

Question

Я работаю над деревом d3 в angular. Я пытаюсь обернуть длинный текст и поместить его посередине.(Я пытался использовать TSPAN, но это вызывает проблему выравнивания).Я использую Foreignobject, чтобы обернуть текст и разместить в середине.но проблема в том, что если я поместу .text((d) => d.name); в nodeEnter выравнивание и текст будет перенесен.но он не будет обновлять текст динамически (переименовывая узел).если я помещу .text((d) => d.name); в nodeUpdate имя узла, обновляющегося динамически, но текст не будет помещаться в центр узла ... Я застрял на этом. Я не смог понять проблему.любая помощь будет оценена Спасибо

// adding foreign object
		nodeEnter
			.append('foreignObject')
			.attr('x', 0)
			.attr('y', 0)
			.attr('width', 0)
			.attr('height', 0)
			.style('fill-opacity', 0)
			.append('xhtml:body')
				.style('background-color', 'transparent')
				.style('overflow', 'hidden')
				.style('text-overflow', 'ellipsis')
				.style('position', 'absolute')
				.style('display', 'table')
				.append('p')
					.style('display', 'table-cell')
					.style('vertical-align', 'middle')
					.style('font-size', this.nodeNameFontsize);
         // .text((d) => d.name);   -- entering text here will align the text properly but not updating dynamically		

	// updating node 
		nodeUpdate
			.select('foreignObject')
			.attr('x', -25)
			.attr('y', '-2.0em')
			.attr('width', this.wrapppingTextContainerWidth)
			.attr('height', this.wrappingTextContainerHeight)
      .text((d) => d.name); //-- entering text here will update the text properly but not align verticaly center
			.style('fill-opacity', 1);