Soy una cooperativa de licenciatura y actualmente estoy desarrollando un proyecto de página web para mi equipo. Al principio, elegí usar la biblioteca dagre-d3 para construir gráficos, y funcionan bien en Chrome. Entonces me doy cuenta de que el elemento ForeignObject en SVG no funciona en IE (que es el navegador principal que admite).

Dado que mi objetivo es esencialmente rellenar el contenido HTML en cada componente del gráfico, me preguntaba si había alguna solución para implementar esto en IE que todavía usa dagre-d3. ¿O alguna recomendación para una biblioteca gráfica diferente?

ACTUALIZAR:

Esencialmente quería crear el gráfico que se muestra en la siguiente captura de pantalla:

A continuación se muestra el código que uso ahora para construir el gráfico usando dagre-d3:

Fragmento de HTML:

<div id="graph-section">
    <svg>
        <g transform="translate(20,20)" />
    </svg>
</div>

Fragmento de JS:

var g = new dagreD3.Digraph();

// Construct nodes
for (var i = 0; i < data.nodes.length; i++) {
    var label = "<div class='graphLabel'>";
    label += "<div class='comp" + data.nodes[i].value.type + " left'>&nbsp;</div>";
    label += "<b>&nbsp;" + data.nodes[i].value.name + "</b><br/>";
    label += "<span class='info'>Start: " + data.nodes[i].value.start + "</span><br/>";
    label += "<span class='info'>End: " + data.nodes[i].value.end + "</span><br/>";
    label += "<span class='info'>Launched by " + data.nodes[i].value.user + "</span>";
    label += "</div>";
    g.addNode(data.nodes[i].id, { label: label });
}

// Construct edges
for (var j = 0; j < data.links.length; j++) {
    g.addEdge(null, data.links[j].start, data.links[j].end);
}

var layout = renderer.run(g, d3.select("#graph-section svg g"));