Estoy tratando de limpiar un código que estoy escribiendo y pensé: ¿Sería posible configurar el HTML interno de un componente usando d3js como el código a continuación?

 d3.select("body").append("div").html(d3.html("../components/modal.html"));

Si esto es posible, qué se necesita para que funcione, porque ahora mismo, esto solo pone un campo de texto en la página que dice [object Promise]

¿Es esto sólo una ilusión?

EDITAR: estoy usando Bootstrap 5 para implementar mi modal

ACTUALIZAR:
Como describí en un comentario a continuación, tomé el código de la respuesta de @SmokeyShakers ---

 d3.html("../components/modal.html").then((data) => { d3.select("body").append("div").html(data) })

---y reemplazó el primer .html(...) con .text(...) así:

 d3.text("../components/modal.html").then((data) => { d3.select("body").append("div").html(data) })

Esto hizo que el modal realmente se renderizara, pero los botones y otras funcionalidades que había integrado en el modal no funcionarían. Y para obtener información adicional, mis botones modales no tenían un atributo onclick="..." en el HTML en línea, pero se agregó usando

 d3.select('#my-modal-submit').on('click', ()=>{...})