使用d3单击时从一个svg形状到其他svg形状的连接线

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var shapes = svg.selectAll(".shape")
                .data(data)
                .enter()
                .append("rect")
                .attr("class", "shape")
                .attr("x", function(d) { return d.x; })
                .attr("y", function(d) { return d.y; })
                .attr("width", function(d) { return d.width; })
                .attr("height", function(d) { return d.height; });

var links = svg.selectAll(".link")
                .data(linksData)
                .enter()
                .append("line")
                .attr("class", "link")
                .attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

shapes.on("click", function(d) {
    // 更新连接线的位置
    links.attr("x1", d.x)
         .attr("y1", d.y);
});