首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使箭头指向D3中节点的外边缘

使箭头指向D3中节点的外边缘
EN

Stack Overflow用户
提问于 2013-05-21 08:13:29
回答 2查看 9.8K关注 0票数 17

我是D3的新手,我正在尝试创建一个交互式网络可视化。我复制了this示例的大部分内容,但我通过使用SVG“线”而不是“路径”将曲线改为直线,并根据节点表示的数据对节点进行缩放。问题是我的箭头(用SVG标记创建)在线条的末尾。由于一些节点很大,箭头隐藏在它们后面。我希望我的箭头显示在它们所指向的节点的外边缘。

下面是我创建标记和链接的方法:

代码语言:javascript
复制
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“属性指定箭头应该显示在离行尾多远的地方。我怎么才能让它依赖于它所指向的节点的半径呢?如果我不能这样做,我可以改为改变线条本身的端点吗?我猜我会在这个函数中做到这一点,它会随着所有东西的移动而重置线条的端点:

代码语言:javascript
复制
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 + ")";
        });
    }

哪种方法更有意义,我该如何实现它?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-26 05:29:19

谢谢Lars Kotthoff,我按照另一个问题的建议完成了这项工作!首先,我从使用行切换到了路径。我不认为我真的必须这样做,但这使我更容易遵循我正在查看的其他示例,因为它们使用了路径。

然后,我向我的节点添加了一个"radius“字段。我只是在设置radius属性时执行此操作,将其添加为实际字段,而不是立即返回值:

代码语言:javascript
复制
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()函数,将这个半径考虑在内。这需要一些简单的几何学知识。

代码语言:javascript
复制
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)和目标节点内部的y变化(offsetY)形成的三角形。这意味着目标节点半径与总路径长度的比率等于offsetX与diffX的比率以及offsetY与diffY的比率。

我还将箭头的refX值更改为10。我不确定为什么这是必要的,但现在它似乎起作用了!

票数 17
EN

Stack Overflow用户

发布于 2014-01-04 19:22:38

我回答了同样的问题over here。答案使用向量数学,它对其他计算也很有用。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16660193

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档