0

d3.jsに読み込ませるための配列をfor文を用いて作成しています。
本来は

var nodes = [ {label:"ロシア機撃墜2人死亡 トルコに対抗措置 NHKニュース"},
              {label:"若いデジタルネイティブ世代はGoogleの検索結果と広告との区別が付かないことが調査で明らかに - GIGAZINE"},
              {label:"低所得年金者に3万円給付へ…対象1000万人 (読売新聞) - Yahoo!ニュース"},
              {label:"JR西日本と協力してカメによる列車輸送障害を防ぐ技術を開発 - ニュース・お知らせ"} ];

のような{label:"○○○"}
といった形にしたいのですが

<!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 = relation[i][0];
  		var list2 = "label:" + list + "}";
  			nodes.push(list2);
  			 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 nodes.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>

上記のプログラムのfor文を用いて配列に格納すると["label:○○○}"]といったように"labelの外側についてしまいます。
これを本来の形にするためにはどのように記述すればよいでしょうか?
お力添えよろしくお願いいたします。

1 件の回答 1

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 = relation[i][0];
    var list2 = {label: list };
        nodes.push(list2);
         links.push(num);
}
1
  • Tsuchinoko7様 返事が遅くなってしまい、申し訳ありません。 おかげさまで正しく表示することができましたありがとうございます!
    – dadada
    Commented 2015年11月29日 6:11

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

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