d3.js 中的在线点答案

【问题标题】：points on line in d3.jsd3.js 中的在线点
【发布时间】：2012-12-26 12:01:03
【问题描述】：

我正在像这样在 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") 并得到我想要的：

为什么我得到了错误的基础结果？如何也可以根据基础绘制准确的点？

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

【问题讨论】：

我看到两个轴；一个在左边，一个在右边。也许这些点是针对错误的轴绘制的？或者在缩放完成后不重绘。没有完整的代码很难说。
我也有同样的问题。在这里查看我的问题：stackoverflow.com/questions/16491180/… 必须可以计算“基础”插值的控制点，以便线穿过所有点。如果你看这里，stackoverflow.com/questions/9710616/…，你会看到这是如何为 HTML 5 quadraticCurveTo 生成的曲线完成的。 D3“基础”曲线的公式是不同的，所以那里给出的解决方案不起作用。
因此，如果有人能够帮助计算 D3 基础插值的控制点所涉及的数学，那么它一定有可能解决这个问题。
这个related question/answer 可能有用。

标签： d3.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：