个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 11:44:03 25 4
gpt4 key购买 nike

各位，

我想使用 D3.js 为以下 JSON 渲染 html 表

我在此过程中使用的 JSON 在这里，http://jsfiddle.net/d9wgnbdd/2

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

我想显示如下表格，需要您的帮助@mccannaff。展望 future 

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>

有人能帮我解决这个问题吗？

最佳答案

如果您只对代码感兴趣，您可以执行以下操作(假设您的 HTML 中存在一个带有 <tbody> 的表，并且您的大 JSON 对象称为 data ):

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);
});

关于javascript - 如何使用 d3 从 JSON 数组元素渲染表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26135635/

25 4 0
文章推荐： JavaScript 没有正确计算重复项
文章推荐： r - 从 R 中的当前日期获取上个月的开始日期和结束日期
文章推荐： .net - Umbraco是或否？
文章推荐： javascript - scrollTop 获取每个像素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com