基于JSON响应的d3排序列规则 [英] d3 ordering column rule based on JSON response

问题描述

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

I have this d3 function that generates a table based on my data's JSON output

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"(计数)，我希望将此字段始终附加在表的最后.当前，它基于来自数据的顺序显示在表上.

The data response varies based on input but one common field in the output is 'Count' I want this field to always be appended last on the table. Currently it displays on the table based on the order it's from the data.

示例数据集:

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

我可以添加一些逻辑吗? 1.收到回应 2.追加表格时，始终将计数"设置为最后一列

Is there some logic that I can add to 1. receive the response 2. Always set 'Count' as the last column when appending table

感谢您的任何帮助，谢谢.

Any help is appreciated, thanks.

推荐答案

似乎您正在将数组columns传递给tabulate函数，并根据该数组在填充行之前根据其组织数据.你从哪里得到的?

It looks like you're passing an array columns to your tabulate function based on which you organize your data before populating your rows. Where are you getting this from?

根据您的评论，columns数组中的值是动态的，可以包含任何内容.我们在这里可以做的是查找count标头，将其删除，然后将其添加到末尾.这样，我们就可以按照需要的方式获得标题，并相应地生成表.检查以下代码段:

Based on your comment, the values in the columns array are dynamic and can include anything. What we can do here is look for the count header, remove it and then add it to the end. This way, we have our headers the way we want it and the table is generated accordingly. Check the snippet below:

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>

这篇关于基于JSON响应的d3排序列规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！