[D3.js advanced series-5.1] color interpolation and linear gradient, d3.js Interpolation

[D3.js advanced series-5.1] color interpolation and linear gradient, d3.js Interpolation

Color interpolation provides two RGB color values. The values between two colors are calculated using the interpolation function. A linear gradient is a filter added to an SVG image. You only need to give the color values at both ends.

1. Color Interpolation

Color interpolation has been mentioned in chapter 5.0 of the advanced section. Here is an example. The color interpolation function is defined as follows,

Var a = d3.rgb (0,255, 0); // red var B = d3.rgb (, 0); // green var compute = d3.interpolate (a, B );

As a result, compute can be used as a function. The parameter range is [0, 1]. Compute (0) returns red, compute (1) returns green, input 0 ~ Returns the interpolation color between red and green.

Sometimes, the range of a value range is not between 0 and 1. For example, the range is between 0 and 150. How can they correspond? Use a linear scale. The definition is as follows,

var linear = d3.scale.linear().domain([0,150]).range([0,1]);

When calculating the color value, you only need to compute (linear (x). The range of x is 0 to 150.

Draw the following 150 rectangles, which are divided into 10 rows and 15 rows. Use the color interpolation function to calculate the fill color of each rectangle.

var rects = svg.selectAll("rect").data(d3.range(150)).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",15).attr("height",15).style("fill",function(d){return compute(linear(d));});

The result is as follows,

2. Linear Gradient Filter

Sometimes you need to use a gradient color on a graph. A gradient represents a smooth transition from one color to another. SVG has a linear gradient <linearGradient> and a radioactive gradient <radialGradient>. The following uses a linear gradient as an example to describe how to use the gradient.

The gradient is also defined in the <defs> label, and an ID number is defined for the gradient. You can call this ID number on the image 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, and y2 are used to define the direction of the gradient, which indicates the horizontal gradient. Offset defines the position where the gradient starts, and stop-color defines the color of the position. Next, use this gradient:

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

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

// 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",. toString (); var stop2 = linearGradient. append ("stop "). attr ("offset", "100% "). style ("stop-color", B. toString ());

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", 15 ). attr ("y", 200 ). attr ("width", 200 ). attr ("height", 30 ). style ("fill", "url (#" + linearGradient. attr ("id") + ")");

The result is as follows,

3. Results

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

Click 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 Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, May 9, 2015
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.