Замените Круги и Тексты в демоверсии d3 на ForeignObject, содержащий пользовательские HTML и привязку ко

Question

Замените Круги и Тексты в демоверсии d3 на ForeignObject, содержащий пользовательские HTML и привязку ко

0

Учитывая эту рабочую скрипту, которая является точной копией этой демонстрации d3, я хотел бы заменить круг и текстовые элементы в SVG элементами foreignObject, которые содержат некоторый пользовательский HTML.

Я смог вручную добавить один, используя следующий код:

var newFO = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
$('svg').append(newFO);
$(newFO).append("<div class='test'>" + strNameVar + "</div>");

(скрипка с этим реализована)

Но это не часть графика, очевидно. Я действительно не понимаю d3, чтобы вставить их на лету, используя набор данных "links" в демо. В основном мне нужно адаптировать следующий код для использования foreignObject вместо текстового элемента, а затем вставить пользовательский HTML:

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function (d) { return d.name; });

update: Эта версия скрипта является самой близкой, я пришел, но она применяет преобразование к div вместо родительского foreignObject.

Scott Beeson 18 дек. 2013, в 23:26

Источник

Теги:

javascript

jquery

html

d3.js

svg

1 ответ

Ещё вопросы

Lars Kotthoff · Accepted Answer · 2013-12-18T20-32-00.000Z

Вы можете сделать это, добавив сначала элементы g а затем элементы foreignObject ниже. Подобно этому (при небольшом злоупотреблении селекторами):

var node = svg.selectAll("foreignObject")
    .data(force.nodes())
  .enter().append("g");
node.append("foreignObject")
    // etc

Полный пример здесь.