Using a line generator

D3 line generator is probably one of the most versatile generators. Although it is called a line generator, it has little to do with the svg:line element. In contrast, it is implemented using the svg:path element. Similar to svg:path, D3 line generator is so flexible that you can effectively draw any shape using line alone; however, to make your life easier, D3 also provides other more specialized shape generators, which will be covered in later recipes in this chapter. In this recipe, we will draw multiple data-driven lines using the d3.svg.line generator.

Getting ready

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

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

How to do it...

Now, let's take a look at the following line generator in action:

<script type="text/javascript"> 
    var width = 500, 
        height = 500, 
        margin = 50, 
        x = d3.scaleLinear() // <-A 
          ...