3
var valueline = d3.svg.line()
.interpolate("monotone") 
.x(function(d) { return x(d.t); })
.y(function(d) { return y(d.r); });

This causes the line to be little smoother.

is there a way to control the strength of the smoothing?

Other string values of interpolate functions (like: basis, cardinal...) give good smoothing, but also change the shape of the line.

What I need is somthing like "monotone" but stronger. Only make corners smooth and rounded.

documentation shows that I can use custom interpolation function, but mentions very little on how to make it.

Aladdin Mhemed
  • 3,817
  • 9
  • 41
  • 56

1 Answers1

3

One option would be a cardinal spline. The cardinal spline has the .tension() parameter that takes values between 0 and 1 with a default of 0.7. By playing around with this parameter, you may be able to achieve what you want.

If that doesn't meet your requirements, your only option is to implement a custom interpolator. The documenation page you've linked to has actually quite some detail on how that would be implemented, including the definition for the linear interpolation and an example of a custom line interpolation.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204