d3.js - 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") 并得到我想要的：

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

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

Answer 1

不幸的是，这是“基础”插值的一个属性——这条线不一定穿过这些点。没有办法“解决”这个问题。除非您绝对需要这种特殊的插值，否则请坚持使用可以让您获得正确分数的插值。

您可以实现自定义插值，使您可以访问线穿过的点并相应地添加圆。不过，这将需要对 d3 和行插值器的工作方式有一定的深入了解。

Answer 2

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