Страница D3js: как заменить сгенерированный topojson svg отдельным файлом svg?

Учитывая скрипт D3js с интерактивными функциями, очень похожими на то, что я хочу, используя топоджсон для создания своего SVG.

Учитывая, что у меня, со своей стороны, есть не топоджсон, а файл SVG, в котором я хочу повторно использовать те же интерактивные функции.

Как мне обработать, чтобы мой код D3js загружал мой файл SVG, а не генерировал его из топоджсона?

Я, конечно же, предоставлю строго закодированный файл SVG с подходящими идентификаторами и синтаксисом.


Идея: я думаю, я должен заменить

d3.json("/mbostock/raw/4090846/us.json", function(error, us) { 
  // further SVG generator code here
});

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


person Hugolpz    schedule 06.04.2014    source источник
comment
d3 очень, очень требователен к данным, которые вы ему даете. Возможно, вам придется заглянуть во внешнюю библиотеку, чтобы изменить формат другого файла на то, что ему нравится.   -  person royhowie    schedule 06.04.2014
comment
Я, конечно же, предоставлю строго закодированный файл SVG с подходящими идентификаторами и синтаксисом.   -  person Hugolpz    schedule 06.04.2014


Ответы (1)


Вы можете включить файл SVG непосредственно в свой HTML, не нужно загружать его в Javascript. Например:

<object id="mySVG" data="my.svg" type="image/svg+xml"></object>

Единственное, что нужно иметь в виду, это то, что вы в конечном итоге получите два DOM в своем документе (основной HTML и встроенный SVG), а селекторы CSS не пересекают границы DOM. То есть d3.select("#IDinSVG") скорее всего не сработает, а что-то вроде d3.select(d3.select("#mySVG").node().getDocumentElement()).select("#IDinSVG") должно.

person Lars Kotthoff    schedule 06.04.2014
comment
как насчет этого подхода: stackoverflow.com/a/20254203/1974961 d3.xml("img/mysvg.svg", function(xml) { document.body.appendChild(xml.documentElement); }); Может позволить селекторам CSS быть более прямыми. - person Hugolpz; 19.04.2014