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

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]);
    }
}

Answer 2

不要忽略其他答案，这是另一种方法。

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

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

如果总共有132个圈子：

索引0到99将小于100（132向下舍入，有一个有效数字）。
索引100到129将小于130（132向下舍入，两位有效数字）。
索引130和131将小于132（所有有效数字为132）。

这是一个快速演示（行数为50个圆圈）：

＆＃13;

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);
  })

＆＃13;

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

＆＃13;

Answer 3

这是使用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);

任何＆lt; 500个映射到＆＃34;红色＆＃34;，从500到589映射到＆＃34;蓝色＆＃34;和≥590映射到＆＃34;黄色＆＃34;。除非使用4位数字作为输入，否则不使用附加范围颜色（＆＃34;橙色＆＃34;）。

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

您现在可以在创建圆圈时指定颜色 - 而不是使用.attr("color", (d, i) => tScale(i))

等语法在数据数组中预先填充颜色

根据for循环的索引

3 个答案: