javascript - D3 更改选择/附加 svgs 的顺序

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', ... , "", "", ""];

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

问题

是否有一种直接的方法来切换 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>