CODEWITHSUNDEEP
d3.js
kjo
kjo

Reputation: 35311

How to draw a *simple* line segment with 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?

Upvotes: 7

Views: 4913

Answers (1)

meetamit
meetamit

Reputation: 25157

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)

Upvotes: 14

Related Questions