Similar to the D3 line generator, area generator also supports identical interpolation mode, hence, it can be used in combination with the line generator in every mode.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter7/area-interpolation.html
In this recipe, we will show how interpolation mode can be configured on an area generator. This way matching interpolated area can then be created with corresponding line:
var width = 500,
height = 500,
margin = 30,
x = d3.scale.linear()
.domain([0, 10])
.range([margin, width - margin]),
y = d3.scale.linear()
.domain([0, 10])
.range([height - margin, margin]);
var data = d3.range(11).map(function(i){
return {x: i, y: Math.sin(i)*3 + 5};
});
var svg = d3.select("body").append("svg");
svg.attr("height", height)
.attr("width", width);
renderAxes(svg);
render("linear");
renderDots(svg);
function render(mode){
var line = d3.svg.line()
.interpolate(mode) // <-A
.x(function(d){return x(d.x);})
.y(function(d){return y(d.y);});
svg.selectAll("path.line")
.data([data])
.enter()
.append("path")
.attr("class", "line");
svg.selectAll("path.line")
.data([data])
.attr("d", function(d){return line(d);});
var area = d3.svg.area()
.interpolate(mode) // <-B
.x(function(d) { return x(d.x); })
.y0(height - margin)
.y1(function(d) { return y(d.y); });
svg.selectAll("path.area")
.data([data])
.enter()
.append("path")
.attr("class", "area")
svg.selectAll("path.area")
.data([data])
.attr("d", function(d){return area(d);});
}
// Dots and Axes related code omittedThe preceding code generates a pseudo area chart with configurable interpolation mode:
Area interpolation
This recipe is similar to the previous one except that in this recipe the interpolation mode is passed in based on the user's selection:
var line = d3.svg.line()
.interpolate(mode) // <-A
.x(function(d){return x(d.x);})
.y(function(d){return y(d.y);});
var area = d3.svg.area()
.interpolate(mode) // <-B
.x(function(d) { return x(d.x); })
.y0(y(0))
.y1(function(d) { return y(d.y); });As you can see, the interpolation mode is configured on both lines along with the area generator through the interpolate function (see lines A and B). Since D3 line and area generator supports the same set of interpolation mode, they can always be counted on to generate matching line and area as seen in this recipe.
D3 area generator also supports the same tension configuration when interpolated using Cardinal mode, however, since it is identical to line generator's tension support, and due to limited scope in this book we will not cover area tension here.
- Please refer to https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area for more information on area generator functions