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 });

然后我想在直线数据点上画点，如下所示：

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 });

结果不是我所期望的：

然后我将插值（“基础”）更改为插值（“基数”），并得到我想要的：

为什么我用basis得到了错误的结果？我怎样才能用基准画出准确的点呢

---

编辑：（未回答）问题。退房仅当将插值从“基础”模式更改为“基数”（或其他）模式时，它才起作用。但是Cardinal有一个问题，它不考虑图的最大高度。我要寻找的是一个解释，解释为什么某些插值模式会阻止将点放在正确的位置（以及为什么基数不考虑最大高度）。

不幸的是，这是“基础”插值的一个属性——直线不一定穿过点。没有办法“修复”这个。除非你绝对需要这个特殊的插值，只要坚持一个可以让你得到正确的点

---

您可以实现自定义插值，通过该插值可以访问直线穿过的点，并相应地添加圆。这需要对d3和直线插值器的工作原理有一定的深入了解。

据我所知，“基础”插值在数据点之间创建了一条平均线。基数创建一条连接所有点的平滑线。

我看到两个轴；一个在左边，一个在右边。也许这些点画错了轴？或者在缩放完成后不重新绘制。没有完整的代码很难说。我也有同样的问题。请看我这里的问题：必须能够计算“基准”插值的控制点，以便直线穿过所有点。如果您看这里，您将看到如何对HTML5生成的曲线执行此操作。

D3

“基”曲线的公式是不同的，尽管给出的解不起作用。因此，如果有人能够帮助计算

D3

基插值的控制点所涉及的数学，则必须能够解决此问题。这可能是有用的。