リンクがノードを指す矢印である強制指向レイアウトを実行しようとしています (こことここに示されている例のように)。また、子を持つノードが折りたたみ可能です (Mike Bostock の例に示されているように:ここ またはここで）。
これまでのところ、ノードの折りたたみは正常に機能していますが、パスに矢印の頭がどのように含まれているかを理解するのに苦労しています。上記の例に基づいたコードの一部を次に示します。
force.nodes(nodes)
.links(links)
.gravity(0.05)
.charge(-1500)
.linkDistance(100)
.friction(0.5)
.linkStrength(function(l, i) {return 1 })
.size([w, h])
.start();
// Append markers
vis.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
//.append("svg:path") // <-- I not sure what this does
//.attr("d", "M0,-5L10,0L0,5");
var path = vis.selectAll("path")
.data(force.links());
// Enter new paths
path.enter().insert("svg:path")
.attr("class", "link")
.attr("marker-end", "url(#end)")
.style("stroke", "#ccc");
// Exit any old paths.
path.exit().remove();
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id; })
node.select("circle")
.style("fill", color);
// Enter any new nodes.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", click)
.call(force.drag);
//Add an immage to the node
nodeEnter.append("svg:image")
.attr("xlink:href", function(d) { return d.image;})
.attr("x", function(d) { return (0 - Math.sqrt(d.size)) / 10 || 4.5;})
.attr("y", function(d) { return (0 - Math.sqrt(d.size)) / 10 || 4.5;})
.attr("height", 16)
.attr("width", 16);
// Exit any old nodes.
node.exit().remove();
// Re-select for update.
node = vis.selectAll("g.node");
path = vis.selectAll("path")
force.on("tick", function() {
// Draw curved links
path.attr("d", function(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;
});
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
私が理解しているのは、矢印が指すブロックを指定することにより、以下のコードが矢印の頭の描画を担当していることです(例.data(["end"]))
vis.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
これは、パスが入力されたときに参照されます (つまり.attr("marker-end", "url(#end)");)。
しかし、グラフにはパスが表示されていますが、矢印は表示されていないため、何かが欠けている可能性があります。
助けてくれてありがとう！