1

这就是我想要实现的 当 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 数据，它是具有第一个元素 = 一些随机 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% 浅蓝色。
4

1 回答 1

1

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

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

于 2013-06-27T17:28:35.647 回答