获取箭头指向D3中节点的外边缘

Posted 2021-03-30

我是D3的新手，我正在尝试创建一个交互式网络可视化。我已经复制了this的大部分示例，但我已经使用SVG“行”而不是“路径”将曲线更改为直线，并且我还根据它们所代表的数据缩放了节点。问题是我的箭头（用SVG标记创建）位于线的末端。由于某些节点很大，箭头会隐藏在它们后面。我希望我的箭头显示在他们指向的节点的外边缘。

以下是我创建标记和链接的方法：

svg.append("svg:defs").selectAll("marker")
    .data(["prereq", "coreq"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link")
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

我注意到“refX”属性指定了箭头应该显示的行尾的距离。我怎样才能使它依赖于它所指向的节点的半径？如果我不能那样做，我可以改为改变行本身的端点吗？我猜我会在这个函数中做到这一点，当一切都移动时，它会重置行的端点：

function tick() {
        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; });

        circle.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

        text.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

哪种方法更有意义，我将如何实现它？

答案

谢谢Lars Kotthoff，我按照其他问题的建议让这个工作！首先，我从使用线路切换到路径。我不认为我实际上必须这样做，但它更容易遵循我正在看的其他示例，因为他们使用路径。

然后，我在节点中添加了“半径”字段。我在设置radius属性时通过将其添加为实际字段而不是立即返回值来执行此操作：

var circle = svg.append("svg:g").selectAll("circle")
                    .data(force.nodes())
                    .enter().append("svg:circle")
                    .attr("r", function(d) {
                        if (d.logic != null) {
                            d.radius = 5;
                        } else {
                            d.radius = node_scale(d.classSize);
                        }
                        return d.radius;

然后我编辑了我的tick（）函数以考虑此半径。这需要一些简单的几何...

function tick(e) {

        path.attr("d", function(d) {
            // Total difference in x and y from source to target
            diffX = d.target.x - d.source.x;
            diffY = d.target.y - d.source.y;

            // Length of path from center of source node to center of target node
            pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

            // x and y distances from center to outside edge of target node
            offsetX = (diffX * d.target.radius) / pathLength;
            offsetY = (diffY * d.target.radius) / pathLength;

            return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
        });

基本上，由路径形成的三角形，它的总x变化（diffX），它的总y变化（diffY）是与目标节点内的路径段（即节点半径）形成的三角形相似的三角形， x在目标节点（offsetX）内部进行更改，并在目标节点（offsetY）内进行y更改。这意味着目标节点半径与总路径长度的比率等于offsetX与diffX的比率以及offsetY与diffY的比率。

我还将箭头的refX值更改为10。我不确定为什么这是必要的，但现在它似乎工作！

另一答案

我回答了同样的问题over here。答案使用矢量数学，它对其他计算也非常有用。