Question

I’m using D3 to create a large object filled with a gradient, but the larger the object, the gradient becomes less smooth. The following is an example of code that creates such type of artifacts:

 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1">
 <script type="text/javascript">

var w = 4000,
    h = 100,
    m = 50;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%")
    .attr("spreadMethod", "pad");

for (i=0; i<m; i++) {
    gradient.append("svg:stop")
        .attr("offset", (i*100.0)/(m-1.0) + "%")
        .attr("stop-color", "hsl(240,0%,"+(i%2)*100+"%)")
        .attr("stop-opacity", 1);
}

svg.append("svg:rect")
    .attr("width", w)
    .attr("height", h)
    .style("fill", "url(#gradient)");

  </script>

Is it possible to increase the gradient smoothing with some SVG attribute?

Answer 1

This is a bug with Chrome’s implementation of gradients, it happens with CSS gradients too. http://code.google.com/p/chromium/issues/detail?id=41756. It works fine in all browsers except Chrome.

Fortunately in your case there’s a workaround: use spreadMethod: reflect; which will allow you to state the gradient in a smaller area and just let the browser repeat it:

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "2%")
    .attr("y2", "0%")
    .attr("spreadMethod", "reflect");

gradient.append("svg:stop")
  .attr("offset", 0)
  .attr("stop-color", "black")
  .attr("stop-opacity", 1);

gradient.append("svg:stop")
  .attr("offset", 1)
  .attr("stop-color", "white")
  .attr("stop-opacity", 1);

This is also has better performance. Hopefully your actual viz looks somewhat similar!

You can see a demo here:
http://jsfiddle.net/uKH4j/