Визуализация d3 SVG-графика с использованием HTML

0

Вот моя настоящая скрипка.

Я использую пример запаса 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? В частности, этот пример.

  • 0
    Мне не ясно, что ты пытаешься сделать. Хотите ли вы иметь принудительно-ориентированный макет с элементами HTML вместо SVG, или вы хотите применить специальный стиль к элементам SVG?
  • 0
    Желательно первое, а второе по возможности :)
Показать ещё 1 комментарий
Теги:
d3.js

1 ответ

1
Лучший ответ

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

Трудно предложить решение, не зная точно, чего именно вы хотите достичь, но надеюсь, что это поможет немного прояснить проблему.

  • 0
    Я действительно просто хотел иметь возможность применять CSS к каждому «узлу». Однако, учитывая комментарии выше и ваш ответ, я решил пойти в совершенно ином направлении. При этом, этот ответ очень подробный, поэтому я отмечу его как принятый. Спасибо.
  • 0
    @ScottBeeson Вы все еще можете применить свой CSS к текстовым элементам. Вы можете дать ему .attr ("id", "yourID") и / или .attr ("class", "yourCSSClass") и написать правила css в своей таблице стилей. Вы можете добавить свои объявления стилей встроенными, как вы заметили с помощью .style ("prop", "value"). Очевидно, есть различия в стилизации элементов SVG, но в большинстве случаев можно достичь тех же результатов. Позиционирование будет осуществляться с помощью атрибутов x, y, dx, dy, заливка цветом и т. Д.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню