points on line in d3.js

Question

I\'m creating a line chart in d3.js like this:

var line = d3.svg.line()
    .interpolate(\"basis\")
    .x(function(d) { return x(d.date); })
    .y(function         


        

Answer 1

This is unfortunately a property of the "basis" interpolation -- the line doesn't necessarily run through the points. There's no way of "fixing" this. Unless you absolutely need this particular interpolation, just stick with one that allows you to get the points right.

You could implement a custom interpolation that gives you access to the points the line runs through and add circles accordingly. This will require a somewhat in-depth knowledge of how d3 and line interpolators work though.

Answer 2

It is my understanding that 'basis' interpolation creates a mean line between the data points. Cardinal create a smooth line that connects all points.