Mam wykres stosując układ sił, ale ma stałą szerokość i wysokość h
w
:Jak zrobić wykres układu sił w D3.js reagującego na wielkość ekranu/przeglądarki
var svg = d3.select("#viz").append("svg")
.attr("id", "playgraph")
.attr("width", w)
.attr("height", h)
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.charge(-1600)
.linkDistance(45)
.size([w, h]);
co skutkuje SVG wykres, który nie zmienia się ani nie zmniejsza pomimo zmian rozmiaru okna lub okna przeglądarki. W celu uczynienia go reaguje (tzn automatycznie zmienia rozmiar się), próbowałem za pomocą viewBox
i preserveAspectRatio
atrybuty:
var svg = d3.select("#viz").append("svg")
.attr("id", "playgraph")
.attr("width", w)
.attr("height", h)
.attr("viewBox", "0, 0, 600, 400")
.attr("preserveAspectRatio", "xMidYMid meet");
Niestety, to nie działa jak nic się nie dzieje, kiedy dostosować rozmiar okna przeglądarki. Zastanawiam się, czy .size([w, h])
wykresu siły ma coś z tym wspólnego.
Proszę rzucić trochę światła na sposób korzystania z atrybutów viewBox
i preserveAspectRatio
z wykresami układu sił.
Możesz także dołączyć funkcję przerysowywania do 'window.onresize' – Wex
To pytanie jest dość stare, ale dla tych, którzy uważają to za przydatne, możesz również rozważyć ograniczenie również tych węzłów do ograniczonego pola. Podczas zmiany rozmiaru węzły pozostaną na ekranie. Przykład: http://bl.ocks.org/mbostock/1129492 – joshfindit