score:63

Accepted 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

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.

score:1

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


Related Query