[英]How to make force layout graph in D3.js responsive to screen/browser size
我有一个使用力布局的图表,但它有一个固定的宽度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尺寸。 删除这两个属性,你会正确的...
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非常接近我所需要的,除了我不知道他为什么嵌套两个<g>
元素并将事件监听器附加到最外面的<g>
(还需要一个隐藏的矩形在所有东西后面以使g对事件做出反应它的整个空间)。
将侦听器附加到<svg>
本身更容易,然后您只需要一个内部<g>
。
这是我的全屏强制导向示例:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.