在没有坐标的D3中绘制关系线

Question

您好我正在尝试弄清楚如何在D3js中的源节点和目标节点之间绘制连接线。我是一个相对较新的程序，现在已经研究了这个问题几天了。问题是我根据节点放置在屏幕上的条件使用随机位置。但是，由于我没有x和y值，因此无法使用源和目标关系连接线

我在下面提供了我的代码

 var testdata =
        [
            {
                "name": "A",
                "type": 1,
                "colour": "red",
                "source": "A",
                "target": "B",
                "x": 50,
                "y" : 500

            },
            {
                "name": "B",
                "type": 2,
                "colour": "blue",
                "source": "B",
                "target": "A",
                "x": 150,
                "y": 350
            },
            {
                "name": "C",
                "type": 3,
                "colour": "yellow",
                "source": 0,
                "target": 2
            },
            {
                "name": "D",
                "type": 1,
                "colour": "red",
                "source": 0,
                "target": 3
            },
            {
                "name": "E",
                "type": 2,
                "colour": "blue",
                "source": 0,
                "target": 0
            },
            {
                "name": "F",
                "type": 3,
                "colour": "yellow",
                "source": 0,
                "target": 0
            },
            {
                "name": "G",
                "type": 1,
                "colour": "red",
                "source": 0,
                "target": 0
            },
            {
                "name": "H",
                "type": 2,
                "colour": "blue",
                "source": 0,
                "target": 0
            },
            {
                "name": "I",
                "type": 3,
                "colour": "yellow",
                "source": 0,
                "target": 0
            },
            {
                "name": "J",
                "type": 1,
                "colour": "red",
                "source": 0,
                "target": 0
            },
            {
                "name": "K",
                "type": 2,
                "colour": "blue",
                "source": 0,
                "target": 0
            },
            {
                "name": "L",
                "type": 3,
                "colour": "yellow",
                "source": 0,
                "target": 0
            },
            {
                "name": "M",
                "type": 1,
                "colour": "red",
                "source": 0,
                "target": 0
            },
            {
                "name": "N",
                "type": 2,
                "colour": "blue",
                "source": 0,
                "target": 0
            },
            {
                "name": "O",
                "type": 3,
                "colour": "yellow",
                "source": 0,
                "target": 0
            },
            {
                "name": "P",
                "type": 1,
                "colour": "red",
                "source": 0,
                "target": 0
            }
        ];



//Set SVG (container) height and width
var  w = 1800,
     h = 1000;

var yposition = 1000;

//Build the SVG container
var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
var i = 0;


var nodes = svg.selectAll("nodes")
        .data(testdata)
        .enter()
        .append("circle");

var nodeattributes = nodes
        .style("fill", function (d) { return d.colour; })
        .attr("cx", function(d, i) {return (i * 100) + 50})
        .attr("r", 10)
        .attr("cy", function(d) {if
        (d.type == 1) {return ((1000 * 500/1000))} else if
        (d.type == 2) {return ((1000 * 350/1000))} else if
        (d.type == 3) {return ((1000 *  450/1000))}});

var text = svg.selectAll("text")
        .data(testdata)
        .enter().append("text")
        .attr("x", function(d, i) {return (i * 100) + 50})
        .attr("y", function(d) {if
        (d.type == 1) {return ((1000 * 500/1000))} else if
        (d.type == 2) {return ((1000 * 350/1000))} else if
        (d.type == 3) {return ((1000 *  450/1000))}})
        .text(function(d) { return d.name; });

这是我目前的输出，