d3.js で力有向グラフをインタラクティブにしようとしています。それを表示する html を作成し、コンテンツを生成する python スクリプトも作成しました。しかし、私はそれを一緒に動作させることはできません。
ブラウザから python スクリプトを呼び出すと、有効な json が返されますが、どうすればそれを d3 に入れることができますか?
どういうわけか、常に結果が追加された URL を呼び出します ( *GET http://localhost/vici/[object%20Object] 404 (Not Found)*) が、アラートには python スクリプトの結果が表示されます。
これは私のコードです：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script type="text/javascript" src="d3.v2.js?2.1.3"></script>
<script src="jquery-1.8.3.js"></script>
<style type="text/css">
circle {
stroke-width: 1.5px;
}
line {
stroke: #999;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "/vici/kellner.py/display",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {name: 302,level: 2}
})
.success(function(pyjson) {
alert(pyjson);
var data = pyjson;
var w = 960,
h = 600,
r = 6;
var svg = d3.select("#d3vis").append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json(pyjson, function(json) {
var force = d3.layout.force()
.nodes(json.nodes)
.links(json.links)
.gravity(.02)
.distance(50)
.charge(-400)
.size([w, h])
.start();
var link = svg.selectAll("line.link")
.data(json.links)
.attr("class", "link")
.enter().append("svg:line");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", function(d) { return d.avatar })
.attr("x", -8)
.attr("y", -8)
.attr("width", function(d) { return d.avatarWidth })
.attr("height", function(d) { return d.avatarHeight });
node.append("text")
.attr("dx", 12)
.attr("dy", ".70em")
.text(function(d) { return d.avatarName });
node.append("svg:title")
.text(function(d) { return d.author; }, function(d) { return d.institute; } );
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 + ")"; });
});
});
});
});
</script>
<div id="d3vis"></div>
</body>
</html>
それだけではありません: ノードをクリックした後に d3 をリロードするにはどうすればよいですか? すべてのノードには名前 ("author":"Some Name") があり、私の python スクリプトはその名前を検索して新しい結果を返すことができます。
私はこれを検索し、いくつかのことを見つけました (例:動的 json データから強制指向グラフのリンクを更新する) 何が本当にいいと思われ、何をしたいのかわかりませんが、それを理解していないので変更できません私のニーズに。(データはどこから来るのか、どこで Python スクリプトを呼び出してデータを提供できますか?)
json を d3 に取り込み、ノードをクリックしたときにグラフを変更するだけです。
私はJava Scriptが初めてなので、どんな助けでも大歓迎です。
編集：ここにまだいくつかのテストデータがあります：
{
"nodes": [
{"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"},
{"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"},
{"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"},
{"author": "Main Name", "institute": "None", "avatarName": "Main Name", "avatar": "img/main.png", "avatarHeight": "24", "avatarWidth": "24"},
{"institute": "None", "avatarWidth": "16", "avatar": "img/user.png", "avatarHeight": "16", "author": "Some Name"}
],
"links": [
{"color": "red", "source": 0, "target": 2, "weight": 1},
{"color": "orange", "source": 1, "target": 2, "weight": 1},
{"color": "yellow", "source": 2, "target": 3, "weight": 1},
{"color": "yellow", "source": 2, "target": 4, "weight": 1}
]
}