0

現在( http://bl.ocks.org/tag1216/76e6bba3fd1784eba83c )こちらのソースを参考にさせて頂きプログラムを作成しております。
その中で

d3.json("https://qiita.com/api/v1/items?per_page=100", function(error, items) {
var index = 0;
var timer = setInterval(function() {
    try {
        if (items.length <= index) {
            clearInterval(timer);
            showMessage("");
            return;
        }
        showMessage("データ追加中(" + (index+1) + "/" + items.length + ")...");
        appendItem(items[index++])
    }
    catch (e) {
        showMessage(e);
        clearInterval(timer);
    }
}, APPEND_INTERVAL);

});
この部分の記述についてお伺いしたいことがあります。
現在私が作成しているプログラムでは

d3.json("https://qiita.com/api/v1/items?per_page=100", function(error, items) {

この部分のurlで提供しているjsonファイルの代わりに、プログラム自体でローカルな配列を作りその中に類似した情報を格納しています。
url部分にローカル変数である配列を格納したい場合どのように記述すれば正常に動かすことができますでしょうか?
d3.jsのAPIページ( https://github.com/mbostock/d3/wiki/API-%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9 )を探してみたのですが有効な手立てを見つけることが出来ませんでした。
この記述のようにローカルな配列へのアクセスの仕方を探しております。お力添えの方よろしくお願い致します。

追記:

<!DOCTYPE html>
<html lang="ja">
<style>
	svg {
    border: solid 1px;
}
.node circle {
    stroke: #000;
    stroke-width: .5px;
    opacity: .7;
}
.node text {
    pointer-events: none;
    font-size: 8px;
}
.node .shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .7;
}
.node .text {
}
.link {
    stroke: #888;
    opacity: .3;
}
	</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 WIDTH = 800,
  HEIGHT = 800,
  TAG_IMAGE_SIZE = 16,
  ITEM_IMAGE_SIZE = 8,
  APPEND_INTERVAL = 250;

  var nodes = [];
  var links = [];
  var xlink = [];
  var link2 = [];
  var tags = [];
  var items = [];
  var Tag = [];
  var nodes2 = [];
  var links2 = [];


  var color = d3.scale.category20();

  var NAME_PREFIX = "_";


  /* 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.href);
  		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){



	var d = [];
	var normal = [];

	  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 sub1 = relation[i][2];
		    				 		var sub2 = relation[i][3];
		    				 		var sub3 = relation[i][4];
		    				 		var sub4 = relation[i][5];



		    				 		var a1 = {"name":sub1,"url":'http://b.hatena.ne.jp/search/tag?q=' + sub1};
		    				 		var a2 = {"name":sub2,"url":'http://b.hatena.ne.jp/search/tag?q=' + sub2};
		    				 		 var a3 = {"name":sub3,"url":'http://b.hatena.ne.jp/search/tag?q=' + sub3};
		    				 		var a4 = {"name":sub4,"url":'http://b.hatena.ne.jp/search/tag?q=' + sub4};
		    				 		var c = [];
		    				 		c.push(a2,a3,a4);
		    				 		normal.push(a2,a3,a4);
		    				 		/*  a.push(sub1,sub2,sub3,sub4); */


		    var list = {"label": relation[i][1]  , "url": relation[i][0],
					 "tags":c};






		   			nodes.push(list);
		         	 links.push(num);



		};

		console.log(nodes)




		showMessage("データ読み込み中");

 showMessage("データ読み込み中");






 items = nodes;
 var index = 0;
 var timer = setInterval(function(){



  try{

   if(items.length <= index){

    clearInterval(timer);

    shoMessage("");

    return;

   }

   showMessage("データ追加中(" + (index + 1) + "/" + items.length + ")");

   appendItem(nodes[index++])

   console.log(items[index++])

  }

  catch(e){

   showMessage(e);

   clearInterval(timer);

  }

 },APPEND_INTERVAL);

 // };



		function appendItem(item){
			items.push(item);
			console.log(items)
		    nodes2.push(item);
			console.log(nodes2)
			 item.tags.forEach(function(tag){
		var name = NAME_PREFIX + tag.name;
			if(!(name in tags)){
				tags[name] = tag;
				tags[name].count = 0;
				nodes2.push(tags[name]);
			}
			tags[name].count++;
			links2.push({
				source:nodes2.indexOf(item),
				target:nodes2.indexOf(tags[name])
			});
			 });

	restart();
}





 var svg = d3.select("body").append("svg")
  .attr("width", WIDTH)
  .attr("height", HEIGHT);

 var force = d3.layout.force()
 .size([WIDTH, HEIGHT])
 .nodes(nodes)
 .links(links)
 .charge(0)
 .linkDistance(20)
 .linkStrength(1)
 .gravity(0.3)
 .start();
  var itemNode = svg.selectAll(".item-node");
  var tagNode = svg.selectAll(".tag-node");
  var link = svg.selectAll(".link")

  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; });
      itemNode.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
      tagNode.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
  });




  function showMessage(text) {
	    d3.select(".message").text(text);
	}


/* 	var tags = nodes.reduce(function(tags,item){ */


function restart(){
	itemNode = itemNode.data(items);
	tagNode = tagNode.data(d3.values(tags));

	drawItemNode();
	drawTagNode();
	darawLink();


	force
		.nodes(nodes2)
		.links(links2)
		.charge(function(d){
			return d.count ? -(d.count * 200) : -100;
		})

	force.start();
}
















function drawItemNode(){
         var g = itemNode.enter().append('g')
         			.attr('class','node item')
         			.call(force.drag);
         var a = g.append("a")
         			.attr('xlink:href',function(d){return 'http://b.hatena.ne.jp/search/tag?q=' + d.name;})
         			.attr('target','_blank');
        a.append("circle")
        	.attr("r",ITEM_IMAGE_SIZE);
		a.append("image")
				.attr("xlink:href",function(d){return image_url;})
				.attr({ x: -ITEM_IMAGE_SIZE/2,
		            y: -ITEM_IMAGE_SIZE/2,
		            width: ITEM_IMAGE_SIZE,
		            height: ITEM_IMAGE_SIZE
		            });
}

function drawTagNode(){
	var g= tagNode.enter().insert("g","item")
		.attr("class","node tag")
		.call(force.drag);
	var a = g.append("a")
         .attr('xlink:href',function(d){return 'http://b.hatena.ne.jp/search/tag?q=' + d.name;})
         			.attr('target','_blank');
	a.append("image")
		.attr("xlink:href",function(d){
			 return d.icon_url == "/icons/medium/missing.png"
                 ? "http://qiita.com/icons/medium/missing.png"
                 : d.icon_url;
			 });
	 a.append("rect");
	    a.append("text")
	        .attr("class", "shadow");
	    a.append("text")
	        .attr("class", "text");

	    tagNode.selectAll("text")
	        .attr("text-anchor", "middle")
	        .text(function(d) {return d.name;});

	    tagNode.each(function(d) {
	        var size = ~~(TAG_IMAGE_SIZE * Math.sqrt(d.count));
	        d3.select(this).select("image")
	            .attr({
	                x: -size/2,
	                y: -size/2,
	                width: size,
	                height: size
	            });
	        d3.select(this).select("rect")
	           .attr({
	                x: -size/2,
	                y: -size/2,
	                width: size,
	                height: size
	           });
	       d3.select(this).selectAll("text")
	           .attr("dy", size / 2 + 10);
	    });
		}


	function drawLink(){
		link = link.data(links2);
		link.enter().insert("line","tag")
			.attr("class","link");
	}









  }



  get_html(function(html){ relation_view(html_to_relation(html)); });






</script>
</body>
</html></html>

自分なりに変更を加えてみたのですが、参考にしているプログラムがindex++で順にonjectが増えている一方私の作成したものは一気にnodes.lengthの49までobjectが追加されてしまう上、forEachの部分で1から順にすべての要素が参照されるのではなく最初の要素のみで処理が止まってしまいます。
これはどの部分を修正すれば良いのでしょうか?
宜しくお願い致します。

1 件の回答 1

1

d3.json(url, callback) がやっていることは、

  • url を読み込み、
  • JSONとしてパースして(通常のオブジェクトに変換し)、
  • callback を呼び出す

というだけです。jQuery の $.get() と同様のものですし、XHR で代用することもできます。

既に配列として用意できているのなら d3.json() を使う必要はありません。その配列を callback の第二引数に渡す、もしくは callback のコードを展開して直接その配列を参照すればいいでしょう。

5
  • unarist様 ご回答ありがとうございます。 callbackの第二引数に直接渡せばよいということは理解できました。ありがとうございます。 具体的な記述についてなのですが、d3.json(..)を外した場合、callback部分のみの記述は function(error,配列){ という書き方で正しいのでしょうか?
    – dadada
    2015年12月15日 7:42
  • @dadada いいえ、違います。callback部分に書かれている function(error, items){...} は関数を作成する式であり、呼び出しは行いません。作成した関数を d3.json() に渡すと、エラー(もしあれば)と取得したオブジェクトを引数に、その関数を呼び出してくれていたのです。 ajaxtower.jp/js/function/index5.html
    – unarist
    2015年12月15日 8:14
  • なるほど。では作った配列をこの記述でいうitemsに渡すにはどのように記述するのが正しいのでしょうか? 参考にしているプログラムはerrorチェックを行う過程でappendItemを呼び出してindexの値がitems.lengthと同じ値になるまで呼び出し続けるような逐次処理をしているという解釈で間違いないでしょうか。 (作った配列,function(error,items){...}という記述が出来れば動くことは理解できるのですが、コードにするにはどのようにすれば良いのかが力不足故皆目見当が付きません... 申し訳ないのですが具体的なプログラムの記述も教えて頂けないでしょうか?
    – dadada
    2015年12月15日 8:35
  • @dadada 追記部分に関して。bl.ocks.org/tag1216/76e6bba3fd1784eba83c ではエラーを <div class="message"></div> の中に表示するようになっていますが、あなたのソースにはそれがありません。とりあえず書き足せばエラーは見れますが、そのエラーはもはや d3.json()appendItem() の呼び出しの問題ではありません、とだけ。
    – unarist
    2015年12月15日 9:06
  • 画像指定のurlの部分などが抜け落ちていることは重々承知しておりました。それ以前にlinksやnodes部分が正しく動かない事の方が重大な欠点のように感じそちらを優先しておりました。一旦messageの部分を書き足し、ひとつひとつ潰してみようと思います。ありがとうございました。
    – dadada
    2015年12月15日 10:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。