Question

我制作了一个图表并使用json发送它。现在我需要将图形的所有类型，id和名称属性放入表格中，可以在出现新数据时更新。代码是：

<!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文件中的所有信息呈现给表？

Answer 1

由于你有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。

d3图表从json制表

1 个答案: