Javascript d3.js中意外的图表点

我在d3.js中得到了意想不到的绘图点。我首先说：

var lineData = [13, 16, 2];

然后按摩至：

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

但由于某些原因，我创建的图表看起来根本不符合这些数据。我可能错过了一些简单的东西，但我无法确定。感谢您的帮助

此外，如果有更好的“d3方式”来按我的意愿处理数据，我也不会感到惊讶。如果您能指出如何改进代码，则可获得额外积分；）

我创建了一个JS小提琴：

---

问题在于，在SVG中，y坐标是从顶部开始计算的，而不是从底部。因此，0是顶部。您希望在行函数中返回

图表高度-d.y

至于其他改进，您可以使用标尺直接从数据计算y值。D3方法是将数据绑定到附加的

path

元素，然后简单地传入line函数，而不是显式地调用它

所有这些和一些较小的东西。

您的点绘制“正确”。可能有两件事让你感到不舒服：1）原点在左上角，而不是右下角，因此所有Y值都是相对于

的顶部绘制的，而不是人们通常期望的底部。2） svg不在其包含div的顶部，因此引入了额外的偏移量。