Graphique Simple des nœuds et des liens sans utiliser la disposition de force
Comment puis-je créer un graphique connecté de base (deux nœuds et un lien les reliant par exemple) qui n'utilise pas de mise en page force()? Je veux juste pouvoir faire glisser un nœud et faire ajuster le lien pour rester connecté car un nœud est en train d'être déplacé. Je ne veux aucune des capacités de charge ou de positionnement de force(). Essentiellement, je veux que chaque nœud soit "collant". Les nœuds ne déplacer lorsque glissé.
Mais y a-t-il un moyen simple de le faire? Chaque exemple que j'ai vu est construit autour d'une force graphe orienté.
J'ai regardé cet exemple, http://bl.ocks.org/mbostock/3750558 , mais il commence par un graphe dirigé par la force, puis rend les nœuds collants. Cette approche semble à l'envers pour ce que je veux.
Y a-t-il un exemple de base quelque part?
1 réponses
, j'ai fait un petit extrait de code. Espérons que cela est utile.
var data = {
nodes: [{
name: "A",
x: 200,
y: 150
}, {
name: "B",
x: 140,
y: 300
}, {
name: "C",
x: 300,
y: 300
}, {
name: "D",
x: 300,
y: 180
}],
links: [{
source: 0,
target: 1
}, {
source: 1,
target: 2
}, {
source: 2,
target: 3
}, ]
};
var c10 = d3.scale.category10();
var svg = d3.select("body")
.append("svg")
.attr("width", 1200)
.attr("height", 800);
var drag = d3.behavior.drag()
.on("drag", function(d, i) {
d.x += d3.event.dx
d.y += d3.event.dy
d3.select(this).attr("cx", d.x).attr("cy", d.y);
links.each(function(l, li) {
if (l.source == i) {
d3.select(this).attr("x1", d.x).attr("y1", d.y);
} else if (l.target == i) {
d3.select(this).attr("x2", d.x).attr("y2", d.y);
}
});
});
var links = svg.selectAll("link")
.data(data.links)
.enter()
.append("line")
.attr("class", "link")
.attr("x1", function(l) {
var sourceNode = data.nodes.filter(function(d, i) {
return i == l.source
})[0];
d3.select(this).attr("y1", sourceNode.y);
return sourceNode.x
})
.attr("x2", function(l) {
var targetNode = data.nodes.filter(function(d, i) {
return i == l.target
})[0];
d3.select(this).attr("y2", targetNode.y);
return targetNode.x
})
.attr("fill", "none")
.attr("stroke", "white");
var nodes = svg.selectAll("node")
.data(data.nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r", 15)
.attr("fill", function(d, i) {
return c10(i);
})
.call(drag);svg {
background-color: grey;
}<script src="https://d3js.org/d3.v3.min.js"></script>