D3更改选择/附加svg的顺序

Question

我已经创建了一个点矩阵视觉效果，如下图所示。彩色圆圈代表值，灰色圆圈代表空/未使用。例如，在我的例子中，三种颜色代表来自 3 个国家的项目的百分比形式的资金：美国、加拿大和墨西哥。灰色代表尚未筹集的资金，也是百分比形式。

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var data = [
  {'country':'USA', 'value':.20},
  {'country':'Canada', 'value':.15},
  {'country':'Mexico', 'value':.10}
];

var circArray = new Array(50);
var circPercentage = 100/circArray.length;

var circData = new Array;

data.forEach(function(item) {

  for (var i =0; i <item.value*100/circPercentage; i++) {
    circData.push(item.country);
}
});
var arrayDiff = 50-circData.length;
for (var i=0; i <(arrayDiff); i++) {
  circData.push("");
}

//console.log(circData)

var maxColumn = 10;

var colorMap = {
  'USA':"#f6d18b",
  'Canada':"#366092",
  'Mexico':"#95b3d7",
  "":"#a6a6a6"
};

var xScale = d3.scaleLinear()
    .range([0,width])
    .domain([0,1]);

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,1]);


graphGroup.selectAll('circle')
    .data(circData)
    .enter()
    .append('circle')
    .attr('cx', function(d, i) {
        return (i % maxColumn) * 30
    })
    .attr('cy', function(d, i) {
        return ~~((i / maxColumn) % maxColumn) * 30
    })
    .attr('r', 10)
    .style('fill', function(d) {
      //console.log(d)
      return colorMap[d];
    });

<script src="https://d3js.org/d3.v5.min.js"></script>

我使用 .forEach() 和我的 for 循环是因为我创建了一个长度正确的数组来将圆圈映射到百分比逻辑，如下所示：

['USA','USA','USA','USA','USA','USA','USA','USA','USA','USA', ... , "", "", ""];

但是，我无法找到我希望附加圆圈的方向/顺序的文档。假设我想要与上面的 sn-p 相反，灰色圆圈出现在顶部，彩色圆圈从底部开始？或者假设我想要左边的灰色圆圈和右边的彩色圆圈？

问题

是否有直接的方法来切换 svg 元素的方向/顺序？还是我唯一的选择来转置数据本身？如：

["","","",... 'USA','USA','USA','USA','USA','USA','USA','USA','USA','USA'];

这种方法让我很困扰，我不知道为什么。我希望有一种更复杂的方法。

Answer 1

在您的代码中，它与circData 的顺序相同。

但实际上你是通过cx 和cy 控制位置，而不是它们的顺序。

---

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var data = [
  {'country':'USA', 'value':.20},
  {'country':'Canada', 'value':.15},
  {'country':'Mexico', 'value':.10}
];

var circArray = new Array(50);
var circPercentage = 100/circArray.length;

var circData = new Array;

data.forEach(function(item) {

  for (var i =0; i <item.value*100/circPercentage; i++) {
    circData.push(item.country);
}
});
var arrayDiff = 50-circData.length;
for (var i=0; i <(arrayDiff); i++) {
  circData.push("");
}

circData.reverse() //<---------------------------

//console.log(circData)

var maxColumn = 10;

var colorMap = {
  'USA':"#f6d18b",
  'Canada':"#366092",
  'Mexico':"#95b3d7",
  "":"#a6a6a6"
};

var xScale = d3.scaleLinear()
    .range([0,width])
    .domain([0,1]);

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,1]);


graphGroup.selectAll('circle')
    .data(circData)
    .enter()
    .append('circle')
    .attr('cx', function(d, i) {
        return (i % maxColumn) * 30
    })
    .attr('cy', function(d, i) {
        return ~~((i / maxColumn) % maxColumn) * 30
    })
    .attr('r', 10)
    .style('fill', function(d) {
      //console.log(d)
      return colorMap[d];
    });

<script src="https://d3js.org/d3.v5.min.js"></script>