"D3.js Advanced Series-5.1" color interpolation and linear gradient

Color interpolation refers to the given two RGB color values, the values between two colors are calculated by the interpolation function. A linear gradient is a filter that is added to an SVG graphic by simply giving the color values at both ends.

1. Color interpolation

In "Advanced-Chapter 5.0" has already mentioned the color interpolation, here to do an example. First define the color interpolation function as follows,

var a = D3.rgb (255,0,0);//red var B = D3.rgb (0,255,0);//green var compute = D3.interpolate (A, b);

As a result, compute can be used as a function, with the range of parameters [0, 1]. Compute (0) returns RED, COMPUTE (1) returns green, and when the value is passed between 0 and 1, the interpolated color between red and green is returned.

Sometimes, the range of a domain is not between 0 and 1, for example, between 0 and 150, how do you say the two correspond? Using a linear scale, define the following,

var linear = d3.scale.linear (). Domain ([0,150]). Range ([0,1]);

When calculating a color value, the range of x is 0 to 150, as long as compute (linear (x)) is available.

The following plots 150 rectangles, divided into 10 rows, 15 per row, and the color interpolation function calculates each rectangle's fill color separately.

var rects = Svg.selectall ("rect"). Data (D3.range). Enter (). Append ("Rect"). attr ("X", function (d,i) {return i%15 * 15 ;}). attr ("Y", function (d,i) {return Math.floor (I/15) * 15;}). attr ("width"). attr ("height"). Style ("Fill", function (d) {return compute (linear (d));});

As a result,

2. Linear Gradient Filter

Sometimes you need to use a gradient color on one graph, and the gradient represents a smooth transition from one color to another. There are linear gradients <linearGradient> and radioactivity gradients <radialGradient> in SVG. The following is a linear gradient example to illustrate how gradients are used.

The gradient is also defined in the <defs> tag, and then an ID number is defined for the gradient, which is used to raise the ID number on the graph that needs to be used.

<defs><lineargradient id= "mygradient" x1= "0%" y1= "0%" x2= "100%" y2= "0%" ><stop offset= "0%" stop-color= " #F00 "/><stop offset=" 100% "stop-color=" #0FF "/></lineargradient></defs>

x1, y1, x2, y2 are used to define the direction of the gradient, which is expressed here as a horizontal gradient. Offset defines the position at which the gradient begins, Stop-color defines the color for this position. Next, use this gradient:

<rect fill= "url (#myGradient)"     x= "y=" "width=" "height="/>

So, what is the code in D3? Add the appropriate elements to the element structure of the linear gradient,

Define a linear gradient var defs = svg.append ("defs"), var lineargradient = defs.append ("LinearGradient"). attr ("id", "Linearcolor"). attr ("x1", "0%"). attr ("Y1", "0%") attr ("X2", "100%"). attr ("y2", "0%"), var stop1 = lineargradient.append ("Stop"). attr ( "Offset", "0%"). Style ("Stop-color", A.tostring ()), var stop2 = lineargradient.append ("Stop"). attr ("offset", "100%"). Style ("Stop-color", b.tostring ());

And then add it to a rectangle, the code is as follows,

Add a rectangle and apply the linear gradient var colorrect = svg.append ("rect"). attr ("x", "X."). attr ("Y", "$"). attr ("height", 30) . Style ("Fill", "url (#" + lineargradient.attr ("id") + ")");

As a result,

3. Results

Summarize the above and add some interactive content so that the readers can see clearly the results are as follows.

Click on the address below and right-click the browser to view the code:

Http://www.ourd3js.com/demo/G-5.1/colorinterpolate.html

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: May 9, 2015
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Advanced Series-5.1" color interpolation and linear gradient