javascript - 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 Fiddle：http: //jsfiddle.net/matrym/qbDhq/1/

score 1 · Accepted Answer

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

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

1 回答 1