forceモデルのノードにRSSから取得したサムネイルの画像を利用したい
<!DOCTYPE html>
<html lang="ja">
<style>
svg{
border:solid 1px;
}
</style>
<head>
<meta charset="utf-8">
<title>D3.js(Force Layout)の練習</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script>
var w = 800;
var h = 800;
var nodes = [];
var links = [];
function for_each(array, func){ Array.prototype.forEach.call(array, func); }
function get_html(callback){
var hatena_hotentry_url = "http://b.hatena.ne.jp/hotentry";
hatena_hotentry_url = "http://allow-any-origin.appspot.com/"
+ encodeURIComponent(hatena_hotentry_url);
/*// var hatena_hotentry_url = "./hatena_hotentry.html"
*/
var req = new XMLHttpRequest();
req.open("GET", hatena_hotentry_url);
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
callback(req.responseText);
req = undefined;
}
};
req.send(null);
}
function html_to_relation(html){
var doc = new DOMParser().parseFromString(html, "text/html");
var error_tags = doc.getElementsByTagName("parsererror");
if(error_tags.length){
console.log("error: ", error_tags);
return [["Parse error", "Maybe HTML is broken"]];
}
var relation = []; /*// [["name", ...], ...]
*/ var entry_elms = doc.querySelectorAll(
"[data-track-section='default'] .entry-contents");
for_each(entry_elms, function(entry_elm){
var entry_link_elm = entry_elm.querySelector(".entry-link");
if(!entry_link_elm){ return; }
var name_array = [];
relation.push(name_array);
name_array.push(entry_link_elm.title);
var entry_meta_elm = entry_elm.nextElementSibling;
if(!entry_meta_elm){ return; }
for_each(entry_meta_elm.querySelectorAll("a.tag"), function(tag_elm){
name_array.push(tag_elm.textContent);
});
});
return relation;
}
function relation_view(relation){
/*document.getElementById("view").textContent
= JSON.stringify(relation, undefined, 2);
*/
for(var i = 0;i<relation.length;i++){
if(i+1 < relation.length){
var num ={"source": i ,"target": + (i+1) };
}else{
var num ={"source": i , "target": 0};
}
var list = {"label": relation[i][0]};
nodes.push(list);
links.push(num);
}
console.log(nodes)
console.log(links)
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([w, h])
.linkStrength(0.1)
.friction(0.9)
.distance(200)
.charge(-30)
.gravity(0.1)
.theta(0.8)
.alpha(0.1)
.start();
/*console.log(nodes)*/
var svg = d3.select("body").append("svg").attr({width:w, height:h});
var link = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style({stroke: "#ccc",
"stroke-width": 1});
var node = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr({r:20,
opacity:0.5})
.style({fill:"red"})
.call(force.drag);
var label = svg.selectAll('text')
.data(nodes)
.enter()
.append('text')
.attr({"text-anchor":"middle",
"fill":"black"})
.style({"font-size":11})
.text(function(d){return d.label;});
force.on("tick", function() {
link.attr({x1: function(d) { return d.source.x; },
y1: function(d) { return d.source.y; },
x2: function(d) { return d.target.x; },
y2: function(d) { return d.target.y; }});
node.attr({cx: function(d) { return d.x; },
cy: function(d) { return d.y; }});
label.attr({x: function(d) { return d.x;},
y: function(d) { return d.y }});
})
}
get_html(function(html){ relation_view(html_to_relation(html)); });
</script>
</body>
</html>現在上記のようなプログラムでforceモデルを実装しています。
はてなブックマークのホットエントリーのRSS( http://b.hatena.ne.jp/hotentry )をこちらの質問の回答( APIを用いてjson形式にしたRSSをd3.jsに読み込みforceモデルを出力したい )を参考にさせて頂き実装しています。
同じRSSから記事を取り出すプログラム
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function displayResult(data){
var feeds = data.responseData.feed;
var list = document.getElementById('list');
var container ='<h1>' + feeds.title + '</h1>';
for (var i = 0; i < feeds.entries.length; i++) {
container += '<div><p>' + feeds.entries[i].title + '【' + feeds.entries[i].categories + '】' + feeds.entries[i].publishedDate + '</p><p>' + feeds.entries[i].content + '</p></div>';
}
list.innerHTML=container;
console.log(container);
}
var url = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/hatena/b/hotentry&num=-1";
d3.json("url").success(function(error,data){
if(error != null){
console.log(err);
return;
}
console.log(data);
});
</script>
<script>
"use script";
function my_hatena_bkm_callback(bkm_json){
document.getElementById("hatena_bkm").textContent =
JSON.stringify(bkm_json,undefined,2);
}
</script>
<title>はてぶJSONデータ取得テスト</title>
</head>
<body>
<div>
<pre id="list"></pre>
<pre id="hatena_bkm"></pre>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/hatena/b/hotentry&num=-1&callback=displayResult"></script>
<script src="http://b.hatena.ne.jp/entry/jsonlite/?url=http://matome.naver.jp/&callback=my_hatena_bkm_callback"></script>
</body>
</html>を実装した際に表示されるサムネイルを１つ目のプログラムであるforceモデルのノードに利用したいと考えています。
２つ目のプログラムではサムネイルのurlをinnerHTMLを用いて取得しているようなのですが、上手くサムネイルのurlだけ取得する方法がわかりません。
こちらの記事( http://qiita.com/tag1216/items/ad406625dc654d3c0982 )を参考にさせて頂いています。
最終的には上記の参考プログラムのようにしたいと考えています。
タグ情報も取得しているため同じように実装できればと考えています。
お力添えの方よろしくお願いいたします。