如何使用D3

呈現來自JSON陣列elemnts表我想渲染使用D3.js

的JSON以下JSON HTML表格我使用這個proceess在這裏，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>

鈣誰能幫助我在流來處理這個問題？

來源

2014-10-01 DevGo

任何人想法做這個嵌套數組元素的分組？ – DevGo 2014-10-02 14:31:19

對不起@ Mary.Hansen，我看不到一種基於數組元素的分組方式，但也是以如此複雜的方式嵌套。我建議你找到一種方法將這個JSON對象展平或者將關鍵元素提取到更類似於表的東西上，然後再次提出問題！ – mccannf 2014-10-13 11:51:41

我們可以渲染一個具有相同方式元素的d3表嗎？不需要分組..我更新了我的問題 - 請看我的問題，現在我簡化它。希望你能幫助。 – DevGo 2014-10-13 13:26:57

如果你只在代碼感興趣，你可以做這樣的事情（它假定有<tbody>表在HTML中存在，而你的大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); 
});

來源

2014-10-15 10:07:35 mccannf

回答

相關問題