Question

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

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（如上所示）更改为任意数字。

d3js图像中心或侧面/底部/顶部

1 个答案: