Javascript D3力定向布局:边界框
这里提出了一个非常类似的问题:。。。我尝试实施建议的解决方案,但没有成功,因此我将再次询问:( 这是我的密码Javascript D3力定向布局:边界框,javascript,d3.js,force-layout,bounding-box,directed-graph,Javascript,D3.js,Force Layout,Bounding Box,Directed Graph,这里提出了一个非常类似的问题:。。。我尝试实施建议的解决方案,但没有成功,因此我将再次询问:( 这是我的密码 // initialization stuff happening up here... // create graph: this.onStateChange = function() { svg.selectAll("g").remove(); nodes = {}; links = []; lin
// initialization stuff happening up here...
// create graph:
this.onStateChange = function() {
svg.selectAll("g").remove();
nodes = {};
links = [];
links = eval(this.getState().string);
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name : link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name : link.target});
});
force.nodes(d3.values(nodes)).links(links).start();
path = svg.append("g").selectAll("path")
.data(force.links()).enter()
.append("path")
.attr("class", function(d) {return "link " + d.type;})
.attr("marker-end", function(d) {return "url(#" + d.type + ")";});
circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter()
.append("circle")
.attr("r", 8)
.call(force.drag);
text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter()
.append("text")
.style("font-size","15px")
.attr("x", 10)
.attr("y", ".42em").text(function(d) {return d.name;});
};
//add gravity
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
circle.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
path.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; });
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + ","
+ d.source.y + "A" + dr + "," + dr
+ " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
};
但是,这不起作用-我无法再移动节点,它们被卡在右上角。我了解了情况。如果有人想在此移动专利诉讼示例()中添加边界框,这可能会有所帮助:
function tick() {
//circle.attr("transform", transform); //no need for this anymore
circle.attr("cx", function(d) { return d.x = Math.max(8, Math.min(300 - 8, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(8, Math.min(280 - 8, d.y)); });
text.attr("transform", transform);
path.attr("d", linkArc);
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x
+ "," + d.source.y
+ "A" + dr
+ "," + dr
+ " 0 0,1 " + d.target.x
+ "," + d.target.y;
}
//function transform(d) { //don't need this anymore either
//return "translate(" + d.x + "," + d.y + ")";
//}
};
您没有将
tick()
设置为force布局的“tick”
事件的处理程序。谢谢,我添加了:force.nodes(d3.values(nodes)).links(links).on(“tick”,tick.start();…但是边界似乎没有生效。节点在框的边界后面四处飞行。(我想实现类似的功能)