Tworzenie selekcji d3 na istniejącym, odłączonym elemencie SVG

Mam komponent JavaScript, który zapewni elementowi <svg> hosta. Chcę wypełnić element SVG przy użyciu d3.js.Tworzenie selekcji d3 na istniejącym, odłączonym elemencie SVG

Jeśli pozwolę d3.js utworzyć element SVG i dodać go do <body>, następnie wszystko działa zgodnie z oczekiwaniami:

var chart = d3.select('body').append('svg');

Jednak mam już element SVG. Chcę, aby mój kod do bardziej przypominają:

var svg = document.createElement('svg'), 
    chart = d3.select(svg);

To ostatnie podejście zapełnia element SVG (jak widać w panelu Elementy narzędzi deweloperskich Chrome), ale to nie czyni właściwie.

Czy podchodzę do tego niepoprawnie?

Nie przeszkadza mi to, że d3 tworzy element SVG, o ile nie dołącza go do DOM i mam do niego dostęp.

EDIT Utworzyłem jsFiddle that reproduces my problem. Możesz przełączać zmienną APPROACH między 1 a 2, aby zobaczyć alternatywne podejścia. Rozumiem ten problem w Chrome i Firefox

EDIT 2 Utworzyłem zrzut ekranu pokazujący pracę i nieprodukcyjnym obok siebie (wersje najnowszej wersji Ubuntu 13.04.):

Możesz zobaczyć, że drzewa elementów są w dużej mierze takie same. Jednak w wersji niepracującej (po lewej) panel Style (po prawej stronie drzewa elementów) brakuje niektórych reguł agenta użytkownika. Nie mam pojęcia, dlaczego to powinno być inne. Sugeruję, że był to błąd w Chrome, ale to samo zachowanie jest widoczne w Firefoksie.

Źródło

2013-07-06 Drew Noakes

Takie podejście powinno zadziałać - co masz na myśli mówiąc, że nie renderuje się prawidłowo? –

@LarsKotthoff, Stworzyłem [jsFiddle] (http://jsfiddle.net/drewnoakes/JVrPw/) –

Problem polega na tym, że tworzysz element SVG w przestrzeni nazw HTML, gdzie jest on interpretowany niepoprawnie. Jeśli zastąpić

var svg = document.createElement('svg');

var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');

to działa dobrze. D3 dba o to, ustawiając przestrzeń nazw automatycznie.

Źródło

2013-07-06 18:32:43

Fantastyczne! Nie wiedziałem, że element '

Ugh, za wolno :). Możesz również użyć 'd3.ns.prefix.svg', aby podać identyfikator URI przestrzeni nazw - patrz skrzypce: http://jsfiddle.net/nrabinowitz/KzwjM/ – nrabinowitz

@nrabinowitz thanks :) –

Tworzenie selekcji d3 na istniejącym, odłączonym elemencie SVG

Odpowiedz

Powiązane problemy