Javascript 为什么只有当我将数据放入内嵌函数时才绘制d3线？

我尝试使用数据联接和以前使用的方法绘制一条线

但是当我使用数据连接时，它不起作用

我错过了什么

行函数如下所示

var lineFunc = d3.line()
    .x(function(d) { return d.x })
    .y(function(d) { return d.y })

第一种方法

svg.append('path')
    .attr('d', lineFunc(geodata))
    .attr('stroke', 'black')
    .attr('fill', 'none');

第二种方法

svg.selectAll('lines')
    .data(geodata)
    .join('path')
    .attr('d', lineFunc)
    .attr('fill', 'red')
    .attr('stroke', 'blue')

我的数据是

var geodata = [{ x: 0, y: 20 }, { x: 150, y: 150 }, { x: 300, y: 100 }, { x: 450, y: 20 }, { x: 600, y: 130 }]

我认为这两种方法都应该有效。

---

如果我想用第二种方法画线，我该怎么做？

line每个项目都需要一个数组。在您的情况下，您只有一行，因此只需将

地理数据

放入如下数组：

svg.selectAll（'lines'））
.data（[geodata]）//像这样
.join（'路径'）
.attr（'d'，lineFunc）
.attr（'fill'，'red'）
.attr（'笔划'，'蓝色'）

这是正确答案，但没有提供任何“为什么”上下文@在BS100中，这种方法之所以有效，是因为line函数需要一个数据数组。执行

.data（geodata）

时，它将为数组中的每个元素调用line func。通过将它包装到另一个数组中，它只在内部数组中被调用一次。@马克，非常感谢。我不确定自己是否理解它在包装到另一个数组中后开始工作的原因。它之所以有效，是因为包装[geodata]将数组转换为只有一个索引号的数组。我现在明白了。