Dagre-d3 IE обходной путь для элемента SVG foreignObject?

Я работаю под руководством и в настоящее время разрабатываю проект веб-страницы для своей команды. Вначале я решил использовать библиотеку dagre-d3 для построения графиков, и они отлично работают в Chrome. Затем я понимаю, что элемент ForeignObject в SVG не работает на IE (который, как правило, поддерживает основной браузер).

Поскольку моя цель состоит в том, чтобы заполнить HTML-контент в каждом компоненте графа, мне было интересно, есть ли какое-либо обходное решение для реализации этого в IE, все еще использующее dagre-d3. Или какие-либо рекомендации для другой библиотеки графов?

UPDATE:

По сути, я хотел создать график, показанный на скриншоте ниже: Sample Screenshot

Ниже приведен код, который я использую для построения графика с помощью dagre-d3:

HTML-фрагмент:

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

JS Snippet:

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

Ответы

Ответ 1

Я использовал SVG и foreignObject в основном в моем проекте mastersis, что было прекрасно, потому что он отлично работал в Chrome и Firefox. Но мое решение/решение проблемы (т.е. IE, не поддерживающее foreignObject), состояло в использовании многоуровневого макета. Я поместил объекты, которые требовали SVG в слое SVG, и объекты, которые я мог бы создать в HTML, я поместил в HTML-слой (в основном элементы с текстом, который является "домашним" для HTML).

Это может стать немного сложным, если вам нужно много элементов друг над другом, потому что svg не поддерживает z-index (вместо этого он использует порядок элементов). Поэтому вам может понадобиться создать несколько слоев HTML/SVG, чтобы решить эту проблему. Просто разместите слои точно друг над другом, и координация их позиций станет легкой. Поскольку объекты SVG размещаются на основе координат, вы можете просто поместить элементы HTML одинаково (например, translate(...))

Я не использовал dagre-d3, поэтому прошу прощения, если этот ответ ушел.