How to draw straight line in d3.js (horizontally and vertically)

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 1

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;

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

You can see it in more context here .

This doesn't cover the cross-hair example, but once you understand the part above it should be clearer.

Answer 2

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