Stack Overflowの最初の質問なので、我慢してください！私はd3.jsを初めて使用しましたが、他の人がそれを使って達成できることに一貫して驚かされています...そして、私が自分でどれほどの進歩を遂げることができたかに驚かされています！明らかに私は何かを壊していないので、私はここの親切な魂が私に光を見せてくれることを願っています。
私の意図は、単に以下を実行する再利用可能なJavaScript関数を作成することです。
- 指定されたDOM要素に空の有向グラフを作成します
- ラベル付けされた画像を含むノードをそのグラフに追加および削除し、それらの間の接続を指定できます。
私はhttp://bl.ocks.org/950642を出発点として採用しました。これは、本質的に、私が作成したい種類のレイアウトだからです。
私のコードは次のようになります：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="d3.v2.min.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
body { width:100%; height:100%; margin:none; padding:none; }
#graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; }
</style>
</head>
<body>
<div id="graph"></div>
</body>
<script type="text/javascript">
function myGraph(el) {
// Initialise the graph object
var graph = this.graph = {
"nodes":[{"name":"Cause"},{"name":"Effect"}],
"links":[{"source":0,"target":1}]
};
// Add and remove elements on the graph object
this.addNode = function (name) {
graph["nodes"].push({"name":name});
update();
}
this.removeNode = function (name) {
graph["nodes"] = _.filter(graph["nodes"], function(node) {return (node["name"] != name)});
graph["links"] = _.filter(graph["links"], function(link) {return ((link["source"]["name"] != name)&&(link["target"]["name"] != name))});
update();
}
var findNode = function (name) {
for (var i in graph["nodes"]) if (graph["nodes"][i]["name"] === name) return graph["nodes"][i];
}
this.addLink = function (source, target) {
graph["links"].push({"source":findNode(source),"target":findNode(target)});
update();
}
// set up the D3 visualisation in the specified element
var w = $(el).innerWidth(),
h = $(el).innerHeight();
var vis = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(graph.nodes)
.links(graph.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
var update = function () {
var link = vis.selectAll("line.link")
.data(graph.links);
link.enter().insert("line")
.attr("class", "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; });
link.exit().remove();
var node = vis.selectAll("g.node")
.data(graph.nodes);
node.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
node.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
node.exit().remove();
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// Restart the force layout.
force
.nodes(graph.nodes)
.links(graph.links)
.start();
}
// Make it all go
update();
}
graph = new myGraph("#graph");
// These are the sort of commands I want to be able to give the object.
graph.addNode("A");
graph.addNode("B");
graph.addLink("A", "B");
</script>
</html>新しいノードを追加するたびに、既存のすべてのノードに再度ラベルが付けられます。これらは互いに重なり合い、物事は醜くなり始めます。update()新しいノードを追加するときに関数function を呼び出すと、node.append(...)データセット全体に対してa を実行するので、これが理由を理解しています。追加するノードに対してのみこれを行う方法を理解することはできません...そして、明らかにnode.enter()単一の新しい要素を作成するためにしか使用できないため、ノードにバインドする必要がある追加の要素に対しては機能しません。どうすれば修正できますか？
この問題のいずれかに与えることができるガイダンスをありがとう！
以前に言及された他のいくつかのバグの原因をすばやく修正したため、編集されました
force.start()代わりに使用することがforce.resume()鍵でした。どうもありがとう！