投稿された記事のタグをforceモデルで表示したい
こちらの記事( http://qiita.com/tag1216/items/b7f846af66db30b8c393 )を参考にさせて頂きながらはてなブックマークのホットエントリーについているタグを同じようにforceモデルで実装したいと考えています。
しかしはてなブックマークのAPIでは参考サイト様で利用されているqiita API( https://qiita.com/api/v1/docs )と同じレスポンスを返すAPIが提供されていません。
そこで同じレスポンスを返すものを自作したいと考えたのですが可能でしょうか？
ひとつ案として考えているのがはてなブックマークのRSS( http://feeds.feedburner.com/hatena/b/hotentry )からホットエントリーの記事urlを取得し、それをはてなブックマークエントリー情報取得API( http://developer.hatena.ne.jp/ja/documents/bookmark/apis/getinfo )に渡しタグ情報を取得しqiita APIと同じようなレスポンスを返すものを作れないかと考えていますが可能でしょうか？
<!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>
function pointer(){
var object = document.getElementById('object');
if (object.contentDocument)
var svgdoc = object.getSVGDocument();
var svgelm = svgdoc.documentElement.style.cursor='pointer';
}
var w = 800;
var h = 800;
var nodes = [];
var links = [];
var xlink = [];
var link2 = [];
var url = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/hatena/b/hotentry&num=-1";
var proxy_url = "http://allow-any-origin.appspot.com/" + encodeURIComponent(url);
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);
console.log(entry_link_elm.href)
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);
name_array.push(entry_link_elm.href);
});
});
return relation;
}
function relation_view(relation){
/*document.getElementById("view").textContent
= JSON.stringify(relation, undefined, 2);
*/
/* d3.json(proxy_url,function(error,json){
if(error){
return console.warn(error);
}
var feeds = json.responseData.feed;
for(var x = 0;x < feeds.entries.length;x++){
var href = {"url": feeds.entries[x].link};
xlink.push(href);
};
}); */
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] , "url": relation[i][6] };
nodes.push(list);
links.push(num);
}
console.log(nodes)
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("a")
.data(nodes)
.enter()
.append("a")
.attr("xlink:href",function(d){return d.url;})
.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"})
.attr({'pointer-events' : 'none'})
.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>上記のコードの中で
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 = [];
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);
console.log(entry_link_elm.href)
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);
name_array.push(entry_link_elm.href);
});
});
return relation;
}
この関数の部分でホットエントリーのタグとurlを取得していますが、参考記事のソースように上手くノードに渡す方法がわかりません。
どのようにすれば同じように動作させることが可能でしょうか
最終的にはこちら( http://qiita.com/tag1216/items/ad406625dc654d3c0982 )と同じような新着投稿を中心にタグノードを展開するはてなブックマーク版のものを実装したいと考えています。
現在投稿ノードをforceモデルで展開するところまでは実装できました。
お力添えお願い致します。