Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw a *simple* line segment with d3.js?

Tags:

d3.js

In the documentation for d3.js I cannot find a straightforward way to draw a simple line segment between two points. The only way I can find there to do this is one that requires creating callbacks for x and y, etc., etc. I.e. a major production just to draw a simple line segment.

Is there something simpler?

like image 704
kjo Avatar asked Oct 07 '13 22:10

kjo


People also ask

What is the syntax to draw a line in D3?

The line generator is then used to make a line. Syntax: d3. line();

How do you sketch a line segment?

Step 1: Draw a line of any length. Step 2: Mark the starting point of the line segment. Step 3: Take a ruler and place the pointer of the compass, apart from the pencil's lead. Step 4: Place the pointer of the compass at the starting point and mark an arc on the line with the pencil point.

How do you draw a horizontal line in D3 JS?

You use the x and y scale functions. svg. append("line") .


1 Answers

Simplest is:

d3.select('svg')
  .append('path')
  .attr({
    d: "M0,0L200,200"
    stroke: '#000'
  });

This is not too bad:

var simpleLine = d3.svg.line()
d3.select('svg')
  .append('path')
  .attr({
    d: simpleLine([[0,0],[200,200]]),
    stroke: '#000'
  });

Still....

I don't know if this is more simple, but it is maybe more direct:

d3.select('svg')
  .append('line')
  .attr({
    x1: 0,
    y1: 0,
    x2: 200,
    y2: 200,
    stroke: '#000'
  })

(All three examples draw a line from 0,0 to 200,200)

like image 78
meetamit Avatar answered Sep 29 '22 10:09

meetamit