Question

我想使用D3来绘制具有多个停止点的颜色渐变 - 从红色转换为橙色，转换为黄色，转换为绿色，转换为蓝色，转换为粉红色，再转换为紫色。

这是我所拥有的，从红色到蓝色：http://jsfiddle.net/Y2zue/

我通过绘制矩形和插入颜色来实现这一点：

var color = d3.scale.linear()
  .domain([0, values.length - 1])
  .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]);
...
g.each(function(d) {
  color.interpolate(d.value);

  d3.select(this).selectAll("rect")
    .data(values)
  .enter().append("rect")
    .attr("x", x)
    .attr("width", x.rangeBand())
    .attr("height", y.rangeBand)
    .style("fill", color);
});

我的基础是Mike Bostock的HSL色标示例：https://gist.github.com/mbostock/3014589

然而，现在我想知道我是否应该使用SVG线性渐变，例如http://bl.ocks.org/d3noob/4433087或http://jsfiddle.net/ZCwrx/

最好的方法是什么 - 矩形或线性渐变？

Answer 1

使用SVG渐变是执行此操作的首选方式。它更容易编码，几乎肯定会给你更好的性能。

Answer 2

我使用以下代码进行停止和启动的SVG渐变：

//定义渐变，以grad为单位，通过y1和y2

设置开始/停止的垂直高度

var grad = svg.append("defs")
    .append("linearGradient")
    .attr({
      "id" : "grad",
      "x1" : "0%",
      "x2" : "0%",
      "y1" : "100%",
      "y2" : "65%"
    });

grad.append("stop")
  .attr("offset", "50%")
  .style("stop-color", "yellow");

grad.append("stop")
  .attr("offset", "70%")
  .style("stop-color", "skyblue");

mySvg.append("rect")
  .attr({ 
    width : width, 
    height : height, 
    fill : "url(#grad)" 
  })

D3.js：在一个区域绘制颜色渐变？

2 个答案: