CODEWITHSUNDEEP
javascriptsvgd3.jsspline
Simon Lang
Simon Lang

Reputation: 42715

Simplest way to make a slightly curved line in D3

Currently I'm drawing lines like this:

line = d3.svg.line()
svg.append('path')
  .datum([from, to])
  .attr('d', line)
  .attr('class', 'line')

Instead of these being perfectly straight, I'd like them to bend slightly. I don't care which direction they bend in.

I am having trouble figuring out how to do this with D3. All the examples seem to be for interpolating a line between a series of values.

Upvotes: 0

Views: 938

Answers (1)

Glenn
Glenn

Reputation: 5342

http://mbostock.github.io/d3/talk/20111018/tree.html

var diagonal = d3.svg.diagonal()
                  .projection(function(d) { return [d.y, d.x]; });


 // Transition links to their new position.
 link.transition()
      .duration(duration)
      .attr("d", diagonal);

So really, that's all you need to do, except maybe change the data / diagonal to reflect your case.

The alternative to using the diagonal projection is to just manually build your curve using paths described in Envil's link.

Upvotes: 1

Related Questions