
[code]

    <!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);
       }
    
    
    
    
        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>
[/code]

上記のようなソースで動かそうとしているのですが上手くforceモデルが描画されません。  
for文を用いてnodes配列とlinks配列を作っているのですがこれが上手く読み込まれていないのでしょうか？  
現在links配列を追加している状態ですが、これを消してnodes配列だけにするとsvg要素のwidghとheightが描画されるのですが追加するとそれさえも描画されない状態です。

参考にさせて頂いているページは(<http://qiita.com/tag1216/items/b7f846af66db30b8c393>
),(<http://bl.ocks.org/mbostock/4062045> )の２つです。  
お力添えよろしくお願い致します。


CC BY-SA 3.0
2015-11-25T05:33:44.667
19272
2015-11-25T07:37:30.883
13172
question
javascript html
d3.jsを用いたforceモデルが上手く作動しない


データの定義部分がおかしいようです。  
nodesとlinksは連想配列を格納するため、以下のように変更すると表示されました。

[code]

    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);
    }
    
[/code]


CC BY-SA 3.0
2015-11-25T07:37:30.883
19277
2015-11-25T07:37:30.883
13045
19272
answer