Jestem spółdzielnią dla studentów i obecnie opracowuję projekt strony internetowej dla mojego zespołu. Na początku zdecydowałem się użyć biblioteki dagre-d3 do tworzenia wykresów i działają one poprawnie w Chrome. Wtedy zdaję sobie sprawę, że element ForeignObject w SVG nie działa na IE (co jest główną przeglądarką do obsługi).

Ponieważ moim celem jest wypełnianie treści HTML w każdym komponencie graficznym, zastanawiałem się, czy nie było żadnego obejścia, aby zaimplementować to na IE nadal używając dagre-d3. Lub jakieś zalecenia dotyczące innej biblioteki grafów?

AKTUALIZACJA:

Zasadniczo chciałem stworzyć wykres pokazany na poniższym zrzucie ekranu:

Poniżej znajduje się kod, którego używam teraz do skonstruowania wykresu za pomocą dagre-d3:

Fragment kodu HTML:

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

Fragment kodu 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"));