Точек в строке в d3.js

Я создаю линейную диаграмму в d3.js следующим образом:

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

Затем я хочу поместить точки в строки данных следующим образом:

var points = svg.selectAll(".point")
        .data(cities1[0].values)
      .enter().append("svg:circle")
         .attr("stroke", "black")
         .attr("fill", function(d, i) { return "black" })
         .attr("cx", function(d, i) { return x(d.date) })
         .attr("cy", function(d, i) { return y(d.temperature) })
         .attr("r", function(d, i) { return 3 });

Результат не тот, который я ожидаю:

Затем я меняю интерполяцию ( "базис" ) на интерполяцию ( "кардинал" ) и получаю то, что хочу:

Почему я получил неправильный результат с основанием? Как я могу нарисовать точную точку с основой тоже?

EDIT: Аналогичный вопрос (без ответа). Проверьте этот jsfiddle. Он будет работать только при изменении интерполяции от базиса до кардинального (или другого) режима. Но у кардинала есть проблема, что он не учитывает максимальную высоту графика. То, что я ищу, - это объяснение того, почему некоторые режимы интерполяции не позволяют помещать точки в нужное место (и почему кардинал не уважает максимальную высоту).