d3 Graph Tabellierung von JSON

Ich machte ein Diagramm und senden Sie es mit JSON. Jetzt muss ich alle Typ-, ID- und Namensattribute des Graphen in eine Tabelle schreiben, die aktualisiert werden kann, wenn neue Daten erscheinen. Der Code lautet:d3 Graph Tabellierung von 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>

Header werden angezeigt, aber keine Informationen unter ihnen angezeigt. Ich denke, das Problem ist mit zusätzlichen Tags in JSON-Datei. Wie kann ich alle Informationen von JSON-Datei zu Tabelle präsentieren?

Quelle

2016-12-06 Noobanswerisnotananswer

Da Sie das JSON-Objekt haben, können Sie diese direkt verwenden in d3 wie folgt aus:

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

Geige: http://jsfiddle.net/4b35qkg2/3/ Ich habe auch die Zeilen Daten die Knoten des json sein.

Ich hoffe, das hilft. Viel Glück!

Bearbeiten: Um zu klären, war das Problem, dass mit d3.json(json, function (error,data) versucht wurde, den JSON von einem Speicherort nicht von einem Objekt (d3.json(json_file_path, function (error,data)) zu laden.

Quelle

2016-12-06 16:03:23 mkaran

aber es zeigt immer nur den zweiten Knoten. Nicht alle Knoten – Noobanswerisnotananswer

Zellenbeschreibung müssen wie sein: 'var Zellen = rows.selectAll ("td") .data (function (row) { return columns.map (function (Spalte) { return {Spalte: Spalte, Wert: Zeile [Spalte]}; }); }) .enter() .append ("td") .attr ("Stil", "Schriftfamilie: Courier") // legt die Schriftart fest .html (Funktion (d) {return d.value;}); ' – Noobanswerisnotananswer

https://jsfiddle.net/4b35qkg2/3/ Ja! von hier http://bl.ocks.org/d3noob/473f0cf66196a008cf99 – mkaran

d3 Graph Tabellierung von JSON

Antwort

Verwandte Themen