Question: I have doubts in drawing the line graph concept. Can anybody explain these coordinates?

`x1=5,x2=10,y1=10,y2=30` 

Please explain each attribute and what it represents. Also, please give me an idea about drawing a straight line vertically and also horizontally (like a cross-hair).

I am total newbie to d3.js graphs, so please help me. Any help would be appreciated.

Answer: 
A line is a simple line between two points and is described by four required attributes.

* x1: The x position of the first end of the line as measured from the
left of the screen.
* y1: The y position of the first end of the line
as measured from the top of the screen.
* x2: The x position of the
second end of the line as measured from the left of the screen.
* y2:
The y position of the second end of the line as measured from the top
of the screen.

The following is an example of the code section required to draw a line;

```
holder.append("line")          // attach a line
    .style("stroke", "black")  // colour the line
    .attr("x1", 100)     // x position of the first end of the line
    .attr("y1", 50)      // y position of the first end of the line
    .attr("x2", 300)     // x position of the second end of the line
    .attr("y2", 150);    // y position of the second end of the line

```

This will produce a line as follows;

![enter image description here](https://i.stack.imgur.com/Zvpkv.png)

The line extends from the point 100,50 to 300,150 (x1,y1 to x2,y2).

You can see it in more context [here](https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-line).

This doesn't cover the cross-hair example, but once you understand the part above it should be clearer.
To draw a line we need TWO points, in a graph if we want to refer any point we use co-ordinates, (x1,y1) is the start point of a line (x2,y2) is the end point of a line, these two points are connected.

To draw a grid in graph refer this link <http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html> If you are not understanding, then ask.Okay