d3.js中的点数

Question

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

结果不是我所期望的：

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

为什么我的基础错误？我怎样才能用基础绘制准确的分数？

编辑：A similar（未答复）问题。查看this jsfiddle。它仅在将插值从基础更改为基数（或其他）模式时才有效。但Cardinal有一个问题，它不尊重图的最大高度。我正在寻找的是解释为什么某些插值模式会阻止将点放在正确的位置（以及为什么基数不会超出最大高度）。

Answer 1

遗憾的是，这是“基础”插值的一个属性 - 该线不一定贯穿这些点。没有办法“修复”这个。除非你绝对需要这种特殊的插值，否则只需坚持使用一个允许你得到正确点数的插值。

您可以实现自定义插值，通过该插值，您可以访问线条贯穿的点，并相应地添加圆圈。这需要深入了解d3和线路插值器的工作方式。

Answer 2

我的理解是＆＃39;基础＆＃39;插值在数据点之间创建平均线。红衣主教创造一条连接所有点的平滑线。