Я использую пример запаса d3, взятый с этой страницы. Я пытаюсь изменить его, чтобы я мог применить свой собственный CSS, а также некоторые привязки для нокаута. Я попытался заменить append ("svg: text") на "foreignObject" и "tspan", как рекомендовано в этом сообщении. Он появился в DOM под элементом "g", но не отображался правильно в браузере.
В настоящее время я пытаюсь просто удалить операторы.append для круга и текста и пройти через каждый элемент "g" и применить пользовательские классы с помощью addClass, как показано ниже, но он не добавляет их вообще.
anchorNode.each(function (i, value) {
$(this).addClass('entity').addClass('relNode');
})
Как я могу использовать пользовательский HTML/CSS с библиотекой d3? В частности, этот пример.
SVG не является бесплатным для всех. Каждый элемент разрешает детям, а также родителям. Например, tspan входит в текстовый элемент svg. Когда дело доходит до элемента группы, здесь допускаются элементы в г элемента SVG. Чтобы использовать tspan, вы должны вставлять его в текст в соответствии с этой скрипкой
Когда дело доходит до foreignObject, вы можете использовать его для встраивания внешних xml-производных, таких как xhtml, если пользовательский агент (браузер) его поддерживает. Он часто используется с оператором switch, где оператор switch проверяет атрибут требуемого атрибута для первого истинного и водопада вниз, как указано в документации, к которой я привязал вас. Вот скрипка, которая демонстрирует это в зависимости от поддержки вашего пользовательского агента.
var switches = anchorNode.append("svg:switch")
switches.append("svg:foreignObject")
.attr("requiredExtensions", "http://www.w3.org/1999/xhtml")
.append("body").attr("xmlns", "http://www.w3.org/1999/xhtml")
.append("p").text(function(d, i) {
return "a la foreignObject" + (i % 2 == 0 ? "" : d.node.label)
}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);
switches.append("svg:text").append("svg:tspan").text(function(d, i) {
return i % 2 == 0 ? "" : d.node.label
}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);
Трудно предложить решение, не зная точно, чего именно вы хотите достичь, но надеюсь, что это поможет немного прояснить проблему.