強制レイアウトを使用したグラフがありますが、固定幅w
および高さh
があります。
_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]);
_
これにより、画面またはブラウザのウィンドウサイズが変更されても、svgグラフは縮小または縮小されません。レスポンシブにする(つまり、自動的にサイズを変更する)ために、viewBox
およびpreserveAspectRatio
属性を使用してみました:
_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");
_
残念ながら、ブラウザのウィンドウサイズを調整しても何も起こらないため、これは機能しませんでした。フォースグラフの.size([w, h])
がこれと何か関係があるのだろうか。
強制レイアウトグラフでviewBox
属性とpreserveAspectRatio
属性を使用する方法について、いくつかの光を当ててください。
問題は.size()
内にありません。.attr("width", w) .attr("height", h)
でSVGディメンションを指定していることです。これらの2つの属性を削除すると、正しくなります...
var svg = d3.select("#viz").append("svg")
.attr("id", "playgraph")
//better to keep the viewBox dimensions with variables
.attr("viewBox", "0 0 " + w + " " + h )
.attr("preserveAspectRatio", "xMidYMid meet");
ここに示されている解決策: http://bl.ocks.org/mbostock/3355967 私にとってはうまくいきました!
window.addEventListener('resize', resize);
function resize() {
var width = window.innerWidth, height = window.innerHeight;
svg.attr("width", width).attr("height", height);
force.size([width, height]).resume();
}
すべての行、ノードなどを追加した後、resize()を実行してください。
Duopixelは私が必要なものに非常に近いですが、2つの<g>
要素をネストし、イベントリスナーを最も外側の<g>
にアタッチした理由がわかりません(g空間全体のイベントに反応します)。
リスナーを<svg>
自体に接続する方が簡単で、必要な内部<g>
は1つだけです。
これが、フルスクリーンの強制指向の例です。
var width = 1000,
height = 1000;
var color = d3.scale.category20();
var svg = d3.select("body")
.append("svg")
.attr({
"width": "100%",
"height": "100%"
})
.attr("viewBox", "0 0 " + width + " " + height )
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("pointer-events", "all")
.call(d3.behavior.zoom().on("zoom", redraw));
var vis = svg
.append('svg:g');
function redraw() {
vis.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
function draw_graph(graph) {
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.nodes(graph.nodes)
.links(graph.links)
.size([width, height])
.start();
var link = vis.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = vis.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
};
draw_graph(data);