從json製表d3圖形

我做了一個圖並使用json發送它。現在我需要將圖形的所有類型，id和名稱屬性放入一個表格中，當新數據出現時可以更新。代碼是：從json製表d3圖形

<!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

但它一直只顯示第二個節點。不是所有的節點 – Noobanswerisnotananswer

的單元格描述都需要如下所示：'var cells = rows.selectAll（「td」） .data（function（row）{ return columns.map（function（column）{ return {column：column，（「style」，「font-family：Courier」）//設置字體樣式（「style」，「font-family：Courier」）; //設置字體樣式（函數（d）{return d.value;}）;' – Noobanswerisnotananswer

https://jsfiddle.net/4b35qkg2/3/是的！從這裏http://bl.ocks.org/d3noob/473f0cf66196a008cf99 – mkaran

從json製表d3圖形

回答

相關問題