javascript - D3 行生成器仅生成 NaN 值

Question

我正在尝试创建一个行生成器函数，我可以向该函数发送任意数据集进行渲染。但是我只从函数中返回 NaN 。这是我的演示代码，显示了我遇到的问题:JsFiddle code 。 (如果没有自动显示，请点击右上角的bug，选择命令行查看console.log输出)

var dataset = [{"x": "W3", "y":1}, {"x": "W5", "y":12},{"x": "W8", "y":1}, {"x": "W11", "y":9}];

var x = d3.scale.linear().range([0, 100 - 2]);
var y = d3.scale.linear().range([25 - 4, 0]);

x.domain(d3.extent(dataset, function(d) { return d.x; }));
y.domain(d3.extent(dataset, function(d) { return d.y; }));

var sparkLine = d3.svg.line()
  .interpolate("basis")
  .x( function (d) { x(d.x); })
  .y( function (d) { y(d.y); });

console.log(sparkLine(dataset))

Answer 1

您在 SparkLine 的 x 和 y 定义中缺少 return。

此外，在您的 fiddle 中，我必须将数据周围的双方括号替换为单方括号，以使其成为简单数组而不是嵌套数组。

var dataset = [{"x": 3, "y":1}, {"x": 5, "y":12},{"x": 8, "y":1}, {"x": 11, "y":9}];

var x = d3.scale.linear().range([0, 100 - 2]);
var y = d3.scale.linear().range([25 - 4, 0]);

x.domain(d3.extent(dataset, function(d) { return d.x; }));
y.domain(d3.extent(dataset, function(d) { return d.y; }));

var sparkLine = d3.svg.line()
  .interpolate("basis")
  .x( function (d) { return x(d.x); })
  .y( function (d) { return y(d.y); });

console.log(sparkLine(dataset));

这是一个有效的 fiddle :http://jsfiddle.net/kke56vzc/