javascript - Gradient to cell according to percentage??百分比是由一些数组值计算出来的

Question

图片表示x=0.7时为70%

观察这个 fiddle :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，它是 数组 具有第一个元素=一些随机 id(忽略此) 和 第二个元素作为多维或简单数组()!!!您在框中看到的所有值都是第二个参数数组

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

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 提供，并按照他们说的去做——您可能想用自定义开始/结束替换它们颜色。