m создаю линейный график в 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 });

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

Я тогда меняю интерполировать (основа») для интерполяции ("кардинал») и получить то, что я хочу:

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

РЕДАКТИРОВАТЬ:Похожий (неотвеченный вопрос. Проверять, выписыватьсяэто jsfiddle, Это будет работать только при смене интерполяции с базового на кардинальный (или другой) режим. Но у кардинала есть проблема в том, что он не учитывает максимальную высоту графа. Что я'я ищу объяснение того, почему некоторые режимы интерполяции мешают расположить точки в нужном месте (и почему кардинал не учитывает максимальную высоту).