从JSON列表的d3图形

Question

I made a graph and send it using json. 我做了一个图，并使用json发送。 Now I need to put all type, id and name attributes of graph into a table, that can be updated when new data will appear. 现在，我需要将图形的所有类型，id和名称属性放入表中，以便在出现新数据时可以对其进行更新。 The code is: 代码是：

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

Headers are appear but no information appear under them. 出现标题，但标题下没有任何信息。 I think the problem is with additional tags in json file. 我认为问题在于json文件中的其他标签。 How I can present all the information from json file to table? 我怎样才能显示所有信息从json文件到表？

Answer 1

Since you have the json object, you can directly use it in d3 like this: 由于您具有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

fiddle: http://jsfiddle.net/4b35qkg2/3/ I also changed the rows data to be the nodes of the json. 小提琴： http : //jsfiddle.net/4b35qkg2/3/我也将行数据更改为json的节点。

I hope this helps. 我希望这有帮助。 Good luck! 祝好运！

Edit: To clarify, the problem was that by using d3.json(json, function (error,data) was trying to load the json from a location not from an object ( d3.json(json_file_path, function (error,data) ). 编辑：为了澄清，问题是通过使用d3.json(json, function (error,data)试图从某个位置而不是从对象（ d3.json(json_file_path, function (error,data) ））加载json 。

从JSON列表的d3图形

问题描述

1 个解决方案

解决方案1
0 2016-12-06 16:03:23

从JSON列表的d3图形

问题描述

1 个解决方案

解决方案1 0 2016-12-06 16:03:23

解决方案1
0 2016-12-06 16:03:23