Как сделать линейную интерполяцию?

Я использую библиотеку D3 версии 5.7.0. Пожалуйста, помогите мне сделать простую линейную интерполяцию между точками.

Моя попытка здесь: JSFIDDLE

Как видите, линия интерполяции в моем примере имеет другую толщину. Это проблема. Мне нужно нарисовать линию интерполяции постоянной толщины. Например: https://bl.ocks.org/gordlea/raw/27370d1eea8464b04538e6d8ced39e89/

Код:

    var line = d3.line()
      .x((d, i) => { return xScale(d.dateUnix); })
      .y((d) => { return yScale(d.price); })
      .curve(d3.curveBasis);      

    svg.append("path")
      .datum(data)
      .attr("d", line);


  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => xScale(d.dateUnix))
    .attr('y', d => yScale(d.price))
    .attr('width', d => 4)
    .attr('height', d => 4)
    .attr('fill', '#000');