Question

我有这个d3函数，它根据我的数据的JSON输出生成一个表

function tabulate(data, columns) {
$("body").css("padding-top", "10px")
var table = d3.select('#response').append('table').attr('class', 'table table-bordered table-hover')
var thead = table.append('thead')
var tbody = table.append('tbody');

thead.append("tr")
    .selectAll("th")
    .data(columns).enter()
    .append("th")
    .text(function(column) {
        return column;
    });

var rows = tbody.selectAll('tr')
    .data(data)
    .enter()
    .append('tr');
console.log("rows: " + rows)
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;
}

数据响应因输入而异，但输出中的一个公共字段为'Count'我希望此字段始终最后附加到表中。目前，它根据数据的顺序显示在表格中。

示例数据集：

data: [{"Cars":"Mercedes","Count":281,"Type":"Automatic"},
      {"Cars":"Toyota","Count":1929,"Type":"Manuel"}]

我可以添加一些逻辑吗？ 1.收到回复 2.在附加表

时，始终将“计数”设置为最后一列

感谢任何帮助。

Answer 1

看起来您正在将数组columns传递给tabulate函数，根据您在填充行之前整理数据。你从哪里得到这个？

根据您的评论，columns数组中的值是动态的，可以包含任何内容。我们在这里可以做的是查找count标题，删除它然后将其添加到最后。这样，我们就可以按照我们想要的方式使用标头，并相应地生成表格。请查看以下代码段：

var data = [{
  "Cars": "Mercedes",
  "Count": 281,
  "Type": "Automatic"
}, {
  "Cars": "Toyota",
  "Count": 1929,
  "Type": "Manuel"
}];

// case where count is in the middle
var columns = ["Cars", "Count", "Type"]; 

// some basic array manipulation to remove it from the middle and put it in the end
var position = columns.indexOf("Count");
if(position != -1) {columns.splice(position, 1);}
columns.push("Count");

function tabulate(data, columns) {
  //$("body").css("padding-top", "10px")
  var table = d3.select('#response').append('table').attr('class', 'table table-bordered table-hover')
  var thead = table.append('thead')
  var tbody = table.append('tbody');

  thead.append("tr")
    .selectAll("th")
    .data(columns).enter()
    .append("th")
    .text(function(column) {
      return column;
    });

  var rows = tbody.selectAll('tr')
    .data(data)
    .enter()
    .append('tr');
  console.log("rows: " + rows)
  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;
}

tabulate(data, columns);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="response">

</div>

d3基于JSON响应的排序列规则

1 个答案: