在d3.js中反转网格数据

Question

我有一个3 * 2网格（3列，2行），每个框上都有文字。

我需要撤消文字的位置，以便左上方有1, 1，右下角有3, 2（因为3, 2表示第三列，第二行）。

我创建了这个grid小提琴。

我尝试了reverse()和sort()，但都没有。 有没有办法扭转生成的组的顺序？ 谢谢。

Answer 1

实际上，在这种情况下，您不需要对数据进行排序。只需根据row和cell值设置正确的单元格和文本位置即可。我已经改变了你的小提琴 - 添加了cellWidth和cellHeight并修复了单元格和文字的定位。

＆＃13;

＆＃13;

let data = {
  "cols": 3,
  "rows": 2,
  "rect_set": [{
    "col": 3,
    "row": 2,
  }, {
    "col": 3,
    "row": 1,
  }, {
    "col": 2,
    "row": 2,
  }, {
    "col": 2,
    "row": 1,
  }, {
    "col": 1,
    "row": 2,
  }, {
    "col": 1,
    "row": 1,
  }, ]
};

let width = 256;
let height = 64;
let cellWidth = width / data.cols;
let cellHeight = height / data.rows;

let svg = d3.select('#grid')
  .append('svg').attr('width', width).attr('height', height);

let cols = data.cols;
let rows = data.rows;

let group = svg.selectAll('g').data(data.rect_set.sort((a,b)=>{
	if (a.col < b.col) return 1;
  return -1;
}))
  .enter()
  .append('g');

group.append('rect')
  .attr('x', function(d) {return cellWidth * (d.col - 1);})
  .attr('y', function(d) {return cellHeight * (d.row - 1);})
  .attr('width', width / cols)
  .attr('height', 32)
  .attr('stroke-width', 4);

// TODO: Reverse.
group.append('text')
  .attr('x', function(d) {return cellWidth * (d.col - 1) + 16;})
  .attr('y', function(d) {return cellHeight * (d.row - 1) + 16;})
  .text(function(d, i) {
    return `${d.col}, ${d.row}`;
  });

＆＃13;

rect {
  fill: white;
  stroke: gray;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;