根据百分比渐变到<td>单元格？？百分比是通过一些数组值计算的

Question

当 x=0.7 时图像表示 70%

注意这个小提琴：http://jsfiddle.net/jayeshjain24/ddfsb/1/

根据框内的值，应该会出现渐变。以下详细信息有一些关于应该做什么的信息:::

Formula------>    (x/1)*100=Percentage.(this determines the % of gradient!!!)
x will vary from 0 to 0.999

其中 x=您在框中看到的值（即 0.06、0.09、0.9 等）。这些值来自 var data，即 array 具有 first element=some random id(ignore this) 和 second element 作为多维或简单数组()!!!您在框中看到的所有值都是第二个参数数组

我想要的是使用上面的公式根据该值计算百分比，然后像我对上图所做的那样以百分比显示它。

COLOR-CODE for above image--->background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(67%,rgba(28,31,178,1)), color-stop(80%,rgba(144,192,229,1))); /* Chrome,Safari4+ */

生成自--> http://www.colorzilla.com/gradient-editor/

----------------------------------- ------------简化------------------------------------- ------------

Lets say if value==0.5

如果单元格来自第一行-->那么

1. 假定蓝色作为父颜色（所以渐变将是蓝色和浅色 蓝色，你可以有任何你想要的父颜色，但渐变应该是 相对）
2. 使用上述公式转换 0.5 百分比--->给你 50%...所以 50% 深蓝色，然后是 50% 浅蓝色。

Answer 1

您可以动态生成相同的webkit-gradient 字符串。我已经用我认为你的意思更新了你的 jsfiddle here。相关代码如下。

.style('background', function(d) {
  if(d.value) {
    var col = d3.rgb(colors(d.value[0]));
    return "-webkit-gradient(linear, left top, right top, color-stop(0%," +
            col.darker(3) + "), color-stop(" + (d.value[2] * 100) + "%," +
            col + "), color-stop(100%," + col.brighter(3) + "))";
  } else {
    return "white";
  }
})

.darker() 和 .brighter() 方法由 D3 提供并按照他们所说的去做 - 您可能想用自定义的开始/结束颜色替换它们。