2

我想使用 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/

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

4

2 回答 2

0

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

于 2013-06-15T18:24:55.803 回答
0

我将以下代码用于带有停止和启动的 SVG 渐变：

// 定义渐变，为grad，设置start/stop的垂直高度，通过y1andy2 

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)" 
  })
于 2014-12-30T18:19:27.880 回答