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

结果并不是我所期望的：

​

​

然后我把interpolate("basis")改成interpolate("cardinal")，然后得到我想要的：

​

​

为什么我用basis得到了错误的结果？我怎么也能画出有基数的精确点？

编辑：A similar (未回答)问题。查看this jsfiddle。只有将插值从基础模式更改为基数(或其他)模式时，它才会起作用。但是Cardinal有一个问题，它不考虑图的最大高度。我正在寻找的是一个解释，为什么一些插值模式阻止将点放在正确的位置(以及为什么cardinal不考虑最大高度)。

Answer 1

不幸的是，这是“基数”插值的一个属性--这条线不一定要通过这些点。没有办法“修复”这个问题。除非您绝对需要这种特殊的插值，否则只需坚持使用允许您获得正确的点的插值。

您可以实现自定义插值，使您能够访问直线所经过的点，并相应地添加圆。不过，这需要对d3和行内插器的工作原理有一些深入的了解。

Answer 2

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