Javascript 如何通过读取文件中的坐标自动绘制直线？

我正试图用箭头在一端画一条线。我还需要为同一绘图中的多个箭头自动执行此操作

d3.csv("/data/coordinates.csv").then(function(data) {
    d.x1= +d.x1;
    d.y1= +d.y1;
    d.x2= +d.x2;
    d.y2= +d.y2;
});

所以输入将是这样的

 x1,y1,x2,y2
 1,2,3,2 
 3,3,5,4 
 5,3,6,3 
 7,5,7,5 
 8,6,8,6 
 9,7,2,8

var xoneValue = function(d) { return d.x1;}, 
xoneMap = function(d) { return xoneValue(d);};

var yoneValue = function(d) { return d.y1;}, 
yoneMap = function(d) { return yoneValue(d);};

var xtwoValue = function(d) { return d.x2;}, 
xtwoMap = function(d) { return xtwoValue(d);};

var ytwoValue = function(d) { return d.y2;}, 
ytwoMap = function(d) { return ytwoValue(d);};

我找到了下面的代码，但是当数据在文件中时，我如何循环使用这些代码呢

 holder.append("line")          // attach a line
.style("stroke", "black")  // colour the line
.attr("x1", xoneMap )     // x position of the first end of the line
.attr("y1", xtwoMap )      // y position of the first end of the line
.attr("x2", xtwoMap )     // x position of the second end of the line
.attr("y2", ytwoMap );    // y position of the second end of the line

你所需要的只是一张支票。例如：

const enterSelection = svg.selectAll(null)
    .data(data)
    .enter()
    .append("line")
    //etc...

顺便说一句，所有这些台词

var xoneValue = function(d) { return d.x1;}, 
xoneMap = function(d) { return xoneValue(d);};

。。。他们什么也不做，只是按原样重新调整值。另外，您创建行函数的尝试

d.x1= +d.x1;
d.y1= +d.y1;
d.x2= +d.x2;
d.y2= +d.y2;

。。。这是不对的。在

d3.csv中执行此操作

这是一个带有您的数据的演示（因为所有坐标都非常小，并且您没有比例，所以我将SVG与一个
viewBox
）结合起来：


常量csv=`x1，y1，x2，y2
1,2,3,2 
3,3,5,4 
5,3,6,3 
7,5,7,5 
8,6,8,6 
9,7,2,8`;
const data=d3.csvParse（csv，函数（d）{
d、 x1=+d.x1；
d、 y1=+d.y1；
d、 x2=+d.x2；
d、 y2=+d.y2；
返回d；
});
const svg=d3.选择（“svg”）；
常量enterSelection=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，d=>d.x1）
.attr（“y1”，d=>d.y1）
.attr（“x2”，d=>d.x2）
.attr（“y2”，d=>d.y2）
.style（“笔划宽度”、“1px”）
.style（“笔划”、“黑色”）

这里有两个问题：如何添加标记和如何创建输入选择。请选择一个。第一件事是如何通过读取文件中的数据自动创建行。所以，删除所有箭头的引用。请每个问题只问一个问题。另外，分享问题中的数据，而不是每条线的坐标。