d3 graph from json

グラフを作ってjsonを使って送ります。今私は、新しいデータが表示されるときに更新することができるテーブルにグラフのすべてのタイプ、IDと名前の属性を配置する必要があります。コードは：d3 graph from json

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
<script> 
    var json = [{"multigraph": false, "directed": true, "links": 
    [{"source": 2, "target": 0}, {"source": 2, "target": 1}, {"source": 2, "target": 3}, {"source": 2, "target": 4}], 
    "graph": {}, "nodes": 
    [{"id": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'", 
    "name": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'", 
    "type": "search_node"}, 
    {"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'", 
    "name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'", 
    "type": "search_node"}, 
    {"id": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'", 
    "name": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'", 
    "type": "search_node"}, 
    {"id": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'", 
    "name": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'", 
    "type": "search_node"}, 
    {"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'", 
    "name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'", 
    "type": "search_node"}]}] 

    d3.json(json, function (error,data) { 

    function tabulate(data, columns) { 
     var table = d3.select('body').append('table') 
     var thead = table.append('thead') 
     var tbody = table.append('tbody'); 

     // append the header row 
     thead.append('tr') 
      .selectAll('th') 
      .data(columns).enter() 
      .append('th') 
      .text(function (column) { return column; }); 

     // create a row for each object in the data 
     var rows = tbody.selectAll('tr') 
      .data(data) 
      .enter() 
      .append('tr'); 

     // create a cell in each row for each column 
     var cells = rows.selectAll('td') 
      .data(function (row) { 
      return columns.map(function (column) { 
       return {column: column, value: row[column]}; 
      }); 
      }) 
      .enter() 
      .append('td') 
      .text(function (d) { return d.value; }); 

     return table; 
    } 

    // render the table(s) 
    tabulate(data, ['type', 'id', 'name']); 
}); 
</script> 
</body> 
</html>

ヘッダーは表示されますが、その下に情報は表示されません。私は問題がjsonファイルの追加のタグであると思う。 jsonファイルからテーブルにすべての情報をどのように表示できますか？

出典

2016-12-06 Noobanswerisnotananswer

あなたはJSONオブジェクトを持っているので、あなたが直接このようにD3でそれを使用することができます。

var json = [{"multigraph": false, "directed": true, "links": 
     [{"source": 2, "target": 0}, {"source": 2, "target": 1}, {"source": 2, "target": 3}, {"source": 2, "target": 4}], 
     "graph": {}, "nodes": 
     [{"id": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'", 
     "name": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'", 
     "type": "search_node"}, 
     {"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'", 
     "name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'", 
     "type": "search_node"}, 
     {"id": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'", 
     "name": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'", 
     "type": "search_node"}, 
     {"id": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'", 
     "name": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'", 
     "type": "search_node"}, 
     {"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'", 
     "name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'", 
     "type": "search_node"}]}] 


     function tabulate(data, columns) { 
      var table = d3.select('body').append('table') 
      var thead = table.append('thead').append('th') 
      var tbody = table.append('tbody'); 

      // append the header row 
      thead.append('tr') 
       .selectAll('th') 
       .data(columns) 
       .enter() 
       .append('th') 
       .text(function (column) { 
       return column; }); 
      // use the nodes from the json since they hold the information for the columns 
      var nodes = data[0].nodes; 
      // create a row for each object in the data 
      var rows = tbody.selectAll('tr') 
            .data(nodes) 
           .enter() 
           .append('tr') 

      // create a cell in each row for each column 
      var cells = rows.selectAll('td') 
      .data(function(row) { 
       return columns.map(function(column) { 
       return { 
        column: column, 
        value: row[column] 
       }; 
      }); 
      }) 
     .enter() 
     .append('td') 
     .text(function(d, i, e) { // i == td 
      return d.value; 
     }) 


      return table; 
     } 
     // render the table(s) 
     tabulate(json, ['type', 'id', 'name']); 

Fi

はフィドル：http://jsfiddle.net/4b35qkg2/3/ 私はまた、JSONのノードであることを行のデータを変更しました。

こちらがお役に立てば幸いです。幸運を祈る！

編集：問題を明確にするために、d3.json(json, function (error,data)を使用して、オブジェクト（d3.json(json_file_path, function (error,data)）ではない場所からjsonをロードしようとしていたという問題がありました。

出典

2016-12-06 16:03:23 mkaran

ただし、常に2番目のノードのみを表示します。すべてのノードではありません – Noobanswerisnotananswer

セルの説明は次のようにする必要があります： 'var cells = rows.selectAll（" td "） .data（function（row）{ return columns.map（function（column）{ return {column：column、 value：row [column]}; }）; } .enter（） .append（ "td"） .attr（ "style"、 "font-family：Courier"）//フォントスタイルを設定します .html（function（d）{return d.value;}）; ' – Noobanswerisnotananswer

https://jsfiddle.net/4b35qkg2/3/ Yep！ここからhttp://bl.ocks.org/d3noob/473f0cf66196a008cf99 – mkaran

答えて

関連する問題