17

我是 D3 的新手，我正在尝试创建交互式网络可视化。我已经复制了这个示例的大部分内容，但是我通过使用 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 + ")";
        });
    }

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

4

2 回答 2

18

感谢 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），y 在目标节点内变化（offsetY）。这意味着目标节点半径与总路径长度的比率等于 offsetX 与 diffX 的比率以及 offsetY 与 diffY 的比率。

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

于 2013-05-25T21:29:19.337 回答
2

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

于 2014-01-04T11:22:38.400 回答