根据百分比梯度到单元格？百分比由一些数组值计算

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 =您在框中看到的值（viz.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+ */

生成自 - ＆gt; http://www.colorzilla.com/gradient-editor/

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

Lets say if value==0.5

如果单元格来自第一行 - >然后

1. 假设蓝色为父颜色（因此渐变将为蓝色和浅色 蓝色，您可以拥有任何您想要的父颜色，但渐变应该是 相对）
2. 使用上面的公式将百分比转换为0.5 ---＆gt;给你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提供并执行他们所说的内容 - 您可能希望将其替换为自定义的开始/结束颜色。