Javascript 如何使用d3js创建svg行

我正在尝试将此示例改编为我的站点：
因为没有成功，我一行一行地复制了代码。 唯一的区别是，我使用的是d3.js-v4。

我无法使此代码正常工作
变量数据和端点数据填写正确，但在SVG中只插入了五个空行标记

据我所知，

.enter（）.append（'line'）.attr（lineAttributes）

应该向SVG添加不存在的行，为每个数据项调用lineAttributes。
请有人解释一下，如果我错了，该怎么办？
我还可以做些什么来调试代码

编辑：
如果我这样创建线：

var lines = svg
.selectAll('line')
.data(data)
.enter()
.append('line')
.attr('x1', function (d) { return d.x1 })
.attr('y1', function (d) { return d.y1 })
.attr('x2', function (d) { return d.x2 })
.attr('y2', function (d) { return d.y2 });

不再调用LineAttribute，而是绘制线条。 那么线性属性不起作用的原因是什么呢？

---

顺便说一句：与圆相同

您应该添加一个属性，如attr（'path'，随便什么）嗨，不，我认为append（'line'）和两个坐标的属性就足够了（如示例中所示）。我更新了上面的Poast。我添加了一个.attr（'y1'，d=>console.log（d）），以查看您的工作情况。从d3v3到d3v4有许多更改，其中包括无法在将对象传递到

selection.attr（）

时设置多个属性，请参阅，另外，d3.behavior.drag现在是d3.drag，事件名称现在是start/end，而不是dragstart/dragend。可能还有其他相关的变化，但我的d3v3已经生锈了。哦，谢谢你，我没有意识到这一点。