javascript - 根据for循环的索引查找小数指数

Question

用户选择一个数字，然后 d3.js 应显示尽可能多的圆圈。我有一个用于为圆圈指定颜色的数组:

var color =["red","blue", "yellow", "orange",....., ] 

● 如果用户选择 593，则前 500 个圆圈应为红色 (color[0])，接下来的 90 个圆圈应为蓝色 (color[1])最后 3 个 (color[2]) 应该是黄色因为

593= 500+90+3 = 5*10^2+9*10^1+3*10^0 

或者与

var number = 593
var number_as_array = number.toString().split(''); 

然后

593 = 5*number_as_array[0]*10^number_as_array.length-0-1 + 9*number_as_array[1]*10^number_as_array.length-1-1+ 3*number_as_array[2]*10^number_as_array.length-2-1

● 如果用户选择 4168，则前 4000 个圆圈应为红色，接下来的 100 个圆圈应为蓝色，接下来的 60 个圆圈应为黄色，最后 8 个圆圈应为橙色

为了给每个圆圈分配颜色，我使用 for 循环创建了一个 JS 对象构建数组

var data=[]
for (index =0; index< number; index++){
circle= {};
        circle.cx = circle_x;
        circle.cy = circle_y;
        circle.color = color[????]
        data.push(circle);

如何根据上述条件将颜色分配给circle.color？

Answer 1

为了不削弱其他答案，这里有另一种方法。

采用给定的圆圈总数，它会检查总数需要多少位有效数字(向下舍入)，以便任何给定的索引小于四舍五入的总数。

我不确定这是否完全有意义，所以我将使用一个示例:

如果总共有 132 个圆圈:

• 索引 0 到 99 将小于 100(132 向下舍入一位有效数字)。

• 索引 100 到 129 将小于 130(132 向下舍入两位有效数字)。

• 索引 130 和 131 将小于 132(所有有效数字均为 132)。

这是一个快速演示(行宽 50 个圆圈):

var svg = d3.select("body")
  .append("svg")
  .attr("width",510)
  .attr("height",510);
  
var n = 377;

var color = d3.scaleOrdinal()
.range(["steelblue","orange","crimson","lawngreen","pink"])

var digits = Math.floor(Math.log10(n));

var circles = svg.selectAll("circle")
  .data(d3.range(n))
  .enter()
  .append("circle")
  .attr("cx",function(d,i) { return i%50 * 10 + 5 })
  .attr("cy",function(d,i) { return Math.floor(i/50) * 10 + 5 })
  .attr("r",5)
  .attr("fill", function(d,i) {
    var exp = digits;
    while (i < Math.floor(n/Math.pow(10,digits-exp))*Math.pow(10,digits-exp)) {
      exp--;
    }
    return color(exp);
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>