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

Question

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

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

UPDATE:

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

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

HTML Сниппет :

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

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

Answer 1

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

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

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

Answer 2

С 29 апреля 2015 года была добавлена ​​функциональность для svg-labels (не используется foreignObject).

Попробуйте это вместо html-labels.

См демо: http://cpettitt.github.io/project/dagre-d3/latest/demo/svg-labels.html

См фиксации: https://github.com/cpettitt/dagre-d3/pull/158