Question

我试图在一端用箭头画线。另外，我还需要针对同一图中的多个箭头自动执行此操作。

scrollView

所以输入就像

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);};

Answer 1

您只需要一个enter selection。例如：

i + 1

所有这些行...

len(nums)

...什么也没做，只是在按原样调整值。另外，您尝试创建行函数...

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;与SVG结合使用）

d3.csv

viewBox

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

1 个答案: