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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据for循环的索引查找小数指数相关的知识,希望对你有一定的参考价值。

用户选择一个数字,然后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黄色,最后一个为橙色

要为每个圆圈指定颜色,我用它来创建一个带有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

答案

不要从其他答案中减少,这是另一种方法。

取一个给定的总圈数,它会检查总数中需要多少有效数字(向下舍入),以便任何给定的索引小于舍入总数。

我不确定这是否完全合理,所以我将使用一个例子:

如果共有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>
另一答案
var color = ["red","orange", "yellow", "green", "blue", "indigo", "violet"];
var circleCount = "4192"; // use string
var length = circleCount.length;
var counter = [];
for (var i = 0; i < length; i++) {
    var digit = circleCount.substring(i, i+1);
    var exponent = length - i - 1;
    var number = digit * Math.pow(10, exponent);
    counter.push(number); // might have to use .unshift instead of .push
}
console.log(counter);
for (var i = 0; i < counter.length; i++) {
    for (var j = 0; j < counter[i]; j++) {
        drawCircle(color[i]);
    }
}
另一答案

这是使用D3的Threshold Scales的完美案例:你给它N个数字,你想要颜色之间的中断,N + 1颜色返回任何输入值。以下是文档中的示例:

var color = d3.scaleThreshold()
    .domain([0, 1])
    .range(["red", "white", "green"]);

color(-1);   // "red"
color(0);    // "white"
color(0.5);  // "white"
color(1);    // "green"
color(1000); // "green"

因此,您的案例的挑战是如何将(例如)593的示例输入转换为两个数字[500,590]的数组:

var sinput = 593 + ""; // make the input a string
var digits = sinput.split("").slice(0, -1); // use all digits but the last one
var breaks = digits.map((d, i, a) =>
    +(a.slice(0, i+1).join("")) * Math.pow(10, a.length-i)
);

var colors = ["red", "blue", "yellow", "orange"];
var tScale = d3.scaleThreshold()
    .domain(breaks)
    .range(colors);

任何<500映射到“红色”,从500 - 589映射到“蓝色”,并且≥590映射到“黄色”。除非使用4位数字作为输入,否则不使用附加范围颜色(“橙色”)。

注意:此逻辑假定输入数字至少为2位数。

您现在可以在创建圆圈时指定颜色 - 而不是使用.attr("color", (d, i) => tScale(i))之类的语法在数据数组中预先填充颜色

另一答案

其他方法似乎过于复杂。您可以将数字拆分为数字,然后根据索引创建所需的10 ^ digitIndex圆圈颜色。我已经包含一行来检查数字是不是太大了。

function mapColors(num) {
  var color =['red','blue', 'yellow', 'orange'];
  
  // If the number is longer than the color array, return undefined
  if ((''+num).length > color.length) return;
  
  return (''+num).split('').reduce(function (acc, n, i, arr) {
    for (var j=n*Math.pow(10, arr.length-i-1); j; --j) {
      acc.push({'color':color[i]});
      // Add more circle properties here
    }
    return acc;
  }, []);
}

console.log(mapColors(23));

以上是关于根据for循环的索引查找小数指数的主要内容,如果未能解决你的问题,请参考以下文章

根据向量大小在 for 循环内擦除 std::vector 的索引

根据给出的元素查找此元素在数组中第一次出现的索引

python查找dataframe的目标索引,后利用For循环删除行为啥不好使?

PIL 图像以错误的顺序保存(for 循环,枚举索引)

小程序根据索引滚动指定的位置

C++ 嵌套 for 循环,用于设置基数/指数的指数