Question

民间，

我想使用D3.js

为以下JSON渲染一个html表

我正在使用的JSON，http://jsfiddle.net/d9wgnbdd/2

例如，“办公室类型”具有更多“代码”，“代码”具有更多“群集”，也是具有更多分支的群集。

我想将表格显示如下，需要你的帮助@mccannaff。期待

Code   Office-code  Corp-Code  Region-Code  Cluster-Code
 CO     CRP           CBE       BN117        C1038
 CO     CRP           CBE       BN117        C1039
 CO     CRP           CBE       BN117        C1049
 CO     CRP           CBE       BN117        C1147

这是我的html我试图显示表格，

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>D3: Subselection Example</title>
        <script type="text/javascript" src="d3.js"></script>
        <style type="text/css">

        body {
          font: 13px sans-serif;
      }
      td, th {
        padding: 1px 25px 0px 1px;
        border: 1px black solid;
        width:80px;
    }   
    ul {
      list-style: none;
      font-weight: bold;
  }

  li {
      margin:  0.2em 0.0em;
      padding: 0.5em 1.0em;
      font-weight: normal;
  }

  </style>
  </head>
  <body>
  <script type="text/javascript">
    d3.json("Udashboard.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.id; });

    // create a row for each object in the data
    var rows = tbody.selectAll('tr')
    .data(data.objects)
    .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.id, value: eval('row.'+column.key) };
      });
    })
    .enter()
    .append('td')
    .text(function (d) { return d.value; });

    return table;
}

var columnFields = [ { id: "ID", key: "id" },
{ id: "Code", key: "officetype[0].code" },
{ id: "C_Code", key: "officetype[0].corp[0].code" },
{ id: "Name", key: "name" } ];

console.log (data);
// render the table(s) 
tabulate(data, columnFields); // 2 column table
});

    </script>

</body>
</html>

有人帮我处理这个问题吗？

Answer 1

如果您只对代码感兴趣，可以执行以下操作（它假设HTML中存在<tbody>的表，并且您的大JSON对象称为data）：< / p>

function codeOfInterest(keyString) {
    return ((keyString == "officetype") || (keyString == "corp") || (keyString == "region") || (keyString == "cpuster"));   
}

var fullList = [];

// Recurse into the data tree
function parse_object(obj, parent, parentLabel) {

    var type = $.type(obj);

    if (type == "object") {

        var parentParam = parent;

        // "code" is the only key we are interested in
        if ("code" in obj) {
           var label = (parentLabel == "" ? "code" : parentLabel + "_code");
           var newParent = $.extend({},parent);
           newParent[label] = obj["code"];
           parentParam = newParent; 
        } 

        // We have reached a leaf node, add to the list 
        if ($.isEmptyObject(obj)) {
            fullList.push($.extend({},parentParam));
        } else {
           for (var i in obj) {
              if ($.type(obj[i]) == "object" || $.type(obj[i]) == "array") {
                 if (codeOfInterest(i)) {
                    parse_object(obj[i], parentParam, i);
                 } else {
                    parse_object(obj[i], parentParam, parentLabel);
                 }
              }
           }
        }
    } else if (type == "array") {
        if ($.isEmptyObject(obj)) {

           // We have reached a leaf node (empty array), add to the list
           fullList.push($.extend({},parent));
        } else {
           for (var i in obj) {
               parse_object(obj[i], parent, parentLabel);
           } 
        }
    }
}

// Add the array of objects to a HTML table
function addToTable(dataList) {
   var defaultValue = "-";
   $.each(dataList, function(index,element) {
       // If one of the keys is undefined, replace its value with the default value
       var code = element.code === undefined ? defaultValue : element.code;
       var officetype_code = element.officetype_code === undefined ? defaultValue : element.officetype_code;
       var corp_code = element.corp_code === undefined ? defaultValue : element.corp_code;
       var region_code = element.region_code === undefined ? defaultValue : element.region_code;
       var cpuster_code = element.cpuster_code === undefined ? defaultValue : element.cpuster_code;

       // Add as a row to the table
       $("<tr><td>"+code+"</td><td>"+officetype_code+"</td><td>"+corp_code+"</td><td>"+region_code+"</td><td>"+cpuster_code+"</td></tr>").appendTo("tbody");
   });
}

$(function() { 
   parse_object(data.objects, {}, "");
   addToTable(fullList);
});

如何使用d3从JSON数组元素渲染表

1 个答案: