javascript - d3js 图像中心或侧面/底部/顶部的力定向路径

Question

所以我有一个边缘带有箭头的图表。一切都很好。然而，线条从左上角开始，这并不是那么好。所以最好让它们从图像的中间开始。或者是否有可能让它们从侧面或/底部开始，具体取决于边缘的 Angular ？最初我想过在tick函数中添加一个值，但是添加到d.source.x会返回一个错误。

link.selectAll("path").attr("d", function(d) {
    var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    //dr = Math.sqrt(dx * dx + dy * dy);
    dr = 0;
    return "M" + 
    d.source.x +  
    "," + 
    d.source.y +
    "A" + 
    dr + "," + dr + " 0 0,1 " + 
    d.target.x +
    "," + 
    d.target.y;
});

我为 this 创建了一个 jsfiddle

解决方案:对于不同大小的图像，可以使用 imagesize 函数来确定图像链接的大小:

// determine the size (width, height) of an image link
function imagesize(d) {
    var self = d3.select(this);
    function loaded() {
        d.width = img.width;
        d.height = img.height;
        self.attr('width', d.width);
        self.attr('height', d.height);
    }
    var img = new Image();
    img.src = self.attr('href');
    if(img.complete) {
        loaded();
    } else {
        img.addEventListener('load', loaded);
        img.addEventListener('error', function() {
            console.debug('error');
        });
    }
}

该函数将通过 .each(imagesize) 在节点上调用，然后我可以将宽度/高度的一半添加到 d.x。

link.selectAll("path").attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        //dr = Math.sqrt(dx * dx + dy * dy);
        dr = 0;
        return "M" + 
        (d.source.x + (d.source.width ? d.source.width/2 : 0)) +  
        "," + 
        (d.source.y + (d.source.height ? d.source.height/2 : 0)) +
        "A" + 
        dr + "," + dr + " 0 0,1 " + 
        (d.target.x + (d.target.width ? d.target.width/2 : 0)) +
        "," + 
        (d.target.y + (d.target.height ? d.target.height/2 : 0));
    });

但是，是否仍然有可能以更微妙的方式添加源和目标？就像在左/右或上/下站点上取决于路径的方向？

Answer 1

要将链接居中，您需要这样做:

link.selectAll("path").attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            //dr = Math.sqrt(dx * dx + dy * dy);
            dr = 0;
            return "M" + 
            (d.source.x +30)+ //here 30 is width/2 of a node 
            "," + 
            (d.source.y +30)+ //here 30 is height/2 of a node
            "A" + 
            dr + "," + dr + " 0 0,1 " + 
            (d.target.x + 30)+ //here 30 is width/2 of target node
            "," + 
            (d.target.y + 30); //here 30 is height/2 of target node
        });

工作代码here

您可以根据您选择的链接显示方式将数字 30(如上所示)更改为任何数字。