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元素，然后简单地传入行函数而不是显式调用它。

所有这些以及一些小事here。