d3.js 中意外的图表点

Question

我在d3.js中得到了意想不到的情节点。我从以下方面开始：

var lineData = [13, 16, 2];

然后按摩至：

[{x: 0, y: 24.375},
{x: 55, y: 30},
{x: 110, y: 3.75}]

但出于某种原因，我正在创建的图表看起来根本不匹配这些数据。 我可能错过了一些简单的东西，但我不能把手指放在上面。任何帮助，不胜感激。

此外，如果有更好的"d3 方法"来按照我的意图处理数据，我不会感到惊讶。如果您能指出如何改进代码，则可以获得奖励积分;)

我创建了一个JS小提琴：http://jsfiddle.net/matrym/qbDhq/1/

Answer 1

问题是在 SVG 中，y 坐标是从顶部而不是底部开始计算的。所以 0 是顶部。您希望在行函数中返回chartHeight - d.y。

至于其他改进，您可以使用刻度直接从数据中计算 y 值。D3 的方法是将数据绑定到追加的 path 元素，然后简单地传入 line 函数，而不是显式调用它。

所有这些以及这里的一些小东西。