Elementy rozmiaru SVG z JavaScript i D3

Question

czy ktoś zna kod js, który pozwoliłby na zmianę rozmiaru elementu svg (całej zawartości) w zależności od rozmiaru okna ustawionego przez użytkownika. moi użytkownicy będą chcieli wyświetlać grafikę d3 w małym dostosowanym widoku na swoich aktywnych komputerach. w tym samym czasie inni będą go uruchamiać na pełnym ekranie na swoich aktywnych komputerach. oznacza to, że wykresy będą musiały zmienić ich rozmiar w zależności od preferencji użytkownika.

Answer 1

Możesz dostosować svg.attr ("width") .attr ("height") podczas ładowania strony lub zmiany rozmiaru, ale potrzebujesz dodatkowego zachowania w kodzie, aby zmienić elementy d3 za pomocą nowy rozmiar.

Można również zajrzeć do atrybutu .viewBox obiektu svg, który będzie skalować elementy svg dynamicznie, ale znalazłem jego zachowanie między różnymi przeglądarkami być zawodny:

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Answer 2

I razem stworzyłem demo tego pożądanego zachowania kilka dni temu. Sprawdź to tutaj - http://bl.ocks.org/4444770

Zasadniczo, słuchasz rozmiaru okna, stosujesz transformację proporcjonalną do elementu g, który otacza wszystkie elementy SVG i dostosowujesz rozmiar nadrzędnego SVG. Nazywamy ten kod na pageload i na okno rozmiaru, gdzie „pojemnik” oznacza div trzymając SVG:

d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")"); 
$("svg").height($("#container").width()*0.618); 

Jest to dobra metoda, jeśli SVG jest umieszczona wewnątrz div.

Innym sposobem jest użycie okna podglądu SVG, co zademonstrował Mike Bostock tutaj - http://bl.ocks.org/harlantwood/raw/6900108/. Ta metoda jest najlepsza, jeśli dodajesz SVG do ciała i jestem pewien, że jest sposób na użycie tej metody podczas umieszczania SVG wewnątrz div, ale nie byłem w stanie znaleźć rozwiązania i w ten sposób stworzyłem powyższe obejść.