Ответ 1

Там лучшее решение.

Я не понял, что функция d3.xml() возвращает xml файл для чтения как фрагмент документа (в отличие от преобразования его в JSON). Другими словами, он возвращает готовое дерево DOM, которое может быть вставлено в ваш основной документ DOM, где вам это нужно.

Зная, что (и зная, что автономные файлы SVG также являются файлами XML), это, вероятно, самый надежный способ добавления внешнего содержимого SVG на вашу веб-страницу:

d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg", 
        function(error, documentFragment) {

    if (error) {console.log(error); return;}

    var svgNode = documentFragment
                .getElementsByTagName("svg")[0];
    //use plain Javascript to extract the node

    main_chart_svg.node().appendChild(svgNode);
    //d3 selection.node() returns the DOM node, so we
    //can use plain Javascript to append content

    var innerSVG = main_chart_svg.select("svg");

    innerSVG.transition().duration(1000).delay(1000)
          .select("circle")
          .attr("r", 100);

});

Заклинание здесь: http://jsfiddle.net/J8sp3/4/

Обратите внимание, что (a) я добавляю содержимое к существующему SVG и (б) я не удаляю ни одно из текущего содержимого SVG.

Конечно, вы также можете добавить SVG в <div> или любой другой элемент, который может его содержать: http://jsfiddle.net/J8sp3/3/ p >

Этот метод должен работать в любом браузере, поддерживающем SVG. Я даже пробовал его в IE8, а структура DOM верна, даже если IE8 не знает, как рисовать круги и прямоугольники!

@Seb, пожалуйста, отмените выбор предыдущего ответа, выберите этот вариант в качестве принятого ответа.

Ответ 2

Правильный формат для встраивания содержимого SVG из другого файла заключается в использовании элемента <use>. Однако вы не можете получить доступ к структуре DOM (то есть к отдельным элементам) вложенного SVG - все это рассматривается как одно изображение.

Если вы хотите изменить графику, описанную внешним файлом, вам лучше читать внешний файл в виде текстового /XML файла (используя d3.text), а затем с помощью этого XML-текста создайте SVG-графику в DOM, написав контент как внутренний HTML-контейнер контейнера <div>

d3.text("mySVGpicture.svg", function(error, externalSVGText) {
         if (error) {console.log(error); return;}

         chart_div.html(externalSVGText);

         svg = chart_div.select("svg");

         do_stuff();
});

Теперь ваш DOM должен выглядеть как

body
  div.chart
     svg
       g#anIDWhichIsInTheSVGFile
         g#DE
           path
           /*etc*/
       g#anotherIDWhichIsInTheSVGFile

Теперь вы можете выбирать элементы как обычно, а также задавать положение или размер созданного svg или удалять g-элементы или что-то еще - все они являются просто нормальными элементами вашего DOM. Убедитесь, что ваши атрибуты "id" не конфликтуют - они должны быть уникальными для всей страницы.

Пример здесь, показывающий дополнительный контент, добавленный в SVG с d3, и переход d3, выбирающий и изменяющий элемент из внешнего SVG:
http://jsfiddle.net/J8sp3/2/

ВНИМАНИЕ!

В исходной версии этого ответа предлагается добавить внешний SVG-контент в виде вложенного SVG внутри SVG, который уже был создан с помощью D3.

Как выяснил Seb, этот метод не работает в последних браузерах Safari и Opera или в Chrome 31 и ниже.

Проблема заключается в том, как браузеры webkit реализуют функцию innerHTML, которая вызывается функцией d3 selection.html(). В частности, функция innerHTML вообще не реализована в элементах SVG!

Самое смутное, что метод не возвращает никаких ошибок, а некоторые версии Chrome фактически отображают содержимое SVG без добавления его в DOM (как если бы вы использовали <use xlink:href="external.svg"/>).