

現在以下のソースでforceレイアウトを実装しています。

[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 = [];
      var xlink = [];
    
    
      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);
    
        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);
      */
    
    
    
      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);
      };
    
      });
    
      console.log(xlink)
    
    
    
       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(xlink)
    
    
    
        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>
[/code]

[code]

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

});

上記の部分でRSSにアクセスし、記事のurlを取得してxlink配列に格納しているのですが、これより後の

[code]

    var node = svg.selectAll("circle")
                        .data(nodes)
                        .enter()
                        .append("circle")
                        .attr({r:20,
                                opacity:0.5})
                        .style({fill:"red"})
                        .call(force.drag);
    
[/code]

この部分にリンク情報として追加したいのですが、xlink配列にアクセスすることが出来ず困っています。  
これは別の関数で定義しているためアクセスできないのでしょうか？  
仮にその場合アクセスする方法や、別のやり方があるのであれば教えて頂きたいです。  
よろしくお願いいたします。


CC BY-SA 3.0
2015-12-01T08:20:27.460
19509
2016-10-27T09:21:14.607
13172
question
javascript html
functionから別のfunctionの変数にアクセスしたい


Google Feed APIは現在使用できなくなっているようです。  
そのため下記の部分でエラーとなり処理が止まっています。

[code]

    d3.json(proxy_url,function(error, json) {
      if(error) {
        return console.warn(error);
      }
    
      // json.responseData => null
      var feeds = json.responseData.feed;
    });
    
[/code]

`xlink`への参照は問題ないように見えますので、  
上記の不具合にまず対処されたほうが良いかと思われます。


CC BY-SA 3.0
2015-12-02T11:12:14.447
19560
2015-12-02T11:12:14.447
13493
19509
answer