Using line curve

By default, the D3 line generator uses the linear curve mode; however, D3 supports a number of different curve factories. The curve function determines how data points will be connected, for example, by a straight line (linear) or a curved line (B-spline). In this recipe, we will show you how these curve modes can be set along with their effects.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter7/line-curve.html

This recipe is built on top of what we did in the previous recipe, so if you are not

yet familiar with basic line generator functions, please refer to the previous recipe first

before proceeding.

How to do it...

Now, let's take a look at how different line interpolation modes can be used:

<script type="text/javascript"> 
var width = 500, 
        height = 500, 
        margin = 30, 
        x = d3.scaleLinear() 
            .domain([0, 10]) 
...