2

我正在处理 cola.js 示例在此处输入链接描述

我在链接的末尾添加了标记（箭头）。但是，由于节点是矩形的，因此与箭头重叠。我试图通过更改标记的“refX”来修复它，但看起来不太好。

标记的代码是：

// define arrow markers for graph links
    svg.append('svg:defs').append('svg:marker')
    .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 30)
        //.attr("refY", -1.5)
        .attr('markerWidth', 6)
        .attr('markerHeight', 6)
        .attr('orient', 'auto')
        .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
        .attr('fill', '#000');

然后将其添加到链接末尾：

` cola.on("tick", function () {

        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; })
            .attr("marker-end","url(#end-arrow)");  
`
4

2 回答 2

0

如果我可以推荐另一种创建边缘的方法。

在此示例之后-免责声明似乎由于我假设代码中的错字而导致实际示例被破坏。

长话短说。重要的部分是你的 cola.on("tick" function(){

            link.each(function (d) {
            d.route = cola.makeEdgeBetween(d.source.innerBounds, d.target.innerBounds, 5);
        });

        link.attr("x1", d => d.route.sourceIntersection.x)
            .attr("y1", d => d.route.sourceIntersection.y)
            .attr("x2", d => d.route.arrowStart.x)
            .attr("y2", d => d.route.arrowStart.y);

makeEdgeBetween 的第三个参数（5），如果我没记错的话，是间距要考虑到你的箭头长度，如果你看源码的话应该叫啊。而且我很确定 makeEdgeBetween 函数将创建边缘直到节点的矩形边界，而不是中心

于 2018-09-25T15:27:30.537 回答
0

有同样的问题，但我采取了不同的方法。我不喜欢只在侧面有箭头，所以我做了一个函数来计算目标和源节点的相对位置，并相应地放置链接目标。

function calculateRelativePosition(d){
        let relative = {"x2":0,"y2":0};
        const pixels = 3;
        const relativex = d.source.x - d.target.x;
        const relativey = d.source.y - d.target.y;

        if(Math.abs(relativex) > Math.abs(relativey)){
            if((d.source.x - d.target.x)>0)
            {
                relative.x2 = d.target.x + d.target.width /2 - pad +pixels;
                relative.y2 = d.target.y;
                return relative;
            }
            else
            {
                relative.x2 = d.target.x- d.target.width/2  + pad - pixels;
                relative.y2 = d.target.y;
                return relative;

            }
        }
        if((d.source.y - d.target.y)>0)
        {
            relative.x2 = d.target.x
            relative.y2 = d.target.y + d.target.height /2 - pad + pixels
            return relative;

        }
        else
        {
            relative.x2 = relative.x2 = d.target.x;
            relative.y2 = d.target.y - d.target.height/2  + pad - pixels
            return relative;
        }

    }

然后在 cola.on("tick")

 cola.on("tick", function () {
        
        link.attr("x1", function (d) { return d.source.x; })
            .attr("y1", function (d) { return d.source.y; })
            .attr("x2", function (d) { return calculateRelativePosition(d).x2 })
            .attr("y2", function (d) { return calculateRelativePosition(d).y2 });

该方法将比较节点的相对位置，并将箭头放置在矩形的 4 个边之一中，即与另一个节点的角距离最小的边。

于 2021-07-29T23:32:59.900 回答