Question

我正在使用d3.js的v4创建强制图。图中的链接始终指向矩形节点的左上角。

我认为问题出在我的tick函数或拖动处理程序中。我不确定是哪一个，是什么问题。

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var simulation = d3.forceSimulation().nodes(nodes_data);
simulation
    .force("centre_force", d3.forceCenter(width / 2, height / 2))
    .force("charge_force", d3.forceManyBody().strength(-90))

var nodes = svg.append("g")
    .attr("class", "nodes")
    .selectAll("rect")
    .data(nodes_data)
    .enter()
    .append("g");

var rect_width = 80;
var rect_height = 50;

nodes.append("rect")
    .attr("width", rect_width)
    .attr("height", rect_height)
    .attr("rx", 10) 
    .attr("ry", 10) 
    .style("stroke", "black");

nodes.append("text")
    .attr("text-anchor", "middle")
    .attr("x", rect_width / 2)
    .attr("y", rect_height / 2)
    .attr("dy", "0.35em")
    .text(function (d) { return d.name; });

var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links_data)
    .enter().append("line")
    .attr("stroke-width", 2);

//defining force for links
var link_force = d3.forceLink(links_data)
    .id(function (d) { return d.name; })
    .distance(150)
    .strength(0.5);

//calling the defined force
simulation.force("links", link_force);

simulation.on("tick", function () {
    nodes.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

    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; });

    nodes.attr("x", (d) => { return d.x; })
        .attr("y", (d) => { return d.y; });

})

//drag function definitions
function drag_start(d) {
    simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function drag_drag(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

function drag_end(d) {
    simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}
//drag function binding
var drag_handler = d3.drag()
    .on("start", drag_start)
    .on("drag", drag_drag)
    .on("end", drag_end);
drag_handler(nodes);

我希望它们指向矩形的边缘，并且如果位置更改，则边缘应动态变化。

以下是实际结果：

以下是预期结果：

Answer 1

我解决了这个问题。

首先，我删除了以下代码

nodes.attr("x", (d) => { return d.x; })
    .attr("y", (d) => { return d.y; });

没有必要。

接下来，我将rect元素的x和y坐标更改为指向rect的中心。 x和y的默认值为0和0。就我而言，我将x更改为-40，将y更改为-25，如下所示：

let rect_width = 80;
let rect_height = 50;

nodes.append("rect")
    .attr("width", rect_width)
    .attr("height", rect_height)
    .attr("rx", 10)
    .attr("ry", 10) 
    .attr("x", -(rect_width / 2))
    .attr("y", -(rect_height / 2))
    .style("stroke", "black");

以下是我的结果

可能不必要的信息-但是要在我的节点后面移动链接，我先在代码中绘制了这些链接，然后又绘制了这些节点。引用了此answer

力向图的链接的端点始终卡在矩形节点的左角

1 个答案: