Д3 силы, направленной планировка: прямоугольник
Здесь был задан очень похожий вопрос: D3 force directed layout with bounding box... Я попытался реализовать предложенные решения, но безуспешно, поэтому я спрошу еще раз: (
Это мой код
// 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 + ")";
}
};
Однако это не работает - я больше не могу перемещать узлы, и они застряли в верхнем правом углу.
1 ответ:
Я узнал, как это происходит. Если кто-то хочет добавить ограничивающую рамку к этому примеру мобильных патентных исков (http://bl.ocks.org/mbostock/1153292 ), это может быть полезно:
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 + ")"; //} };