スタック オーバーフローに関する最初の質問です。私は d3.js を初めて使用しますが、他の人が d3.js を使用して達成できることに常に驚かされてきました...そして、私自身が 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()に単一の新しい要素を作成するためにしか使用できないため、ノードにバインドする必要がある追加の要素では機能しません. どうすればこれを修正できますか?
この問題のいずれかで提供できるガイダンスをありがとうございます!
以前に言及された他のいくつかのバグのソースをすばやく修正したため、編集されました
