0

我已经根据这个力导向图示例用 D3.js 构建了一个图,但我不是在节点之间使用直线,而是使用SVG 路径元素创建曲线。单个链接的数据结构包括目标,它们表示链接所连接的节点。此外,链接数据结构还包含一个线元素,其中包含定义路径的点数组。链接的数据结构如下所示:

{
    id:4,        
    type:"link", 
    fixed:true, 
    source: {
                id:1, 
                name: "A",
                type:"node", 
                x:226, 
                y:190, 
                fixed:1, 
                index:0, 
                weight:1, 
            }, 
    target: {
                id:2, 
                name: "B",
                type:"node", 
                x:910, 
                y:85, 
                fixed:1, 
                index:1, 
                weight:1, 
            }, 
    line:[{x:387, y:69}, {x:541.5, y:179}, {x:696, y:179}]
}

现在,在我的 on tick事件处理程序中,我通过引用d.source.xd.source.yd.target.x、 d.target 获得了节点AB的当前xy坐标。是的。我还有节点 A(d.line的第一个元素)和节点 B(d.line的最后一个元素)的初始位置。我要做的是根据对节点AB的位置所做的更改重新计算第一个点和最后一个点之间的点。

这是我的 on tick事件处理程序:

force.on("tick", function() {
svg.selectAll("g.node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    svg.selectAll("g.link .line").attr("d", function(d) { 
         var xOffset = 0, // Want to calculate this 
             yOffset = 0; // Want to calculate this
         var line = [ ];
         for (var i=0; i<d.line.length; i++) {
             if (i==0) {
                  line[line.length] = { x : d.source.x, y: d.source.y }
             }
             else if (i==d.line.length-1) {
                  line[line.length] =  { x : d.target.x, y: d.target.y }
             }
             else {
                  line[line.length] = { x: d.line[i].x + xOffset, y: d.line[i].y + yOffset }
             }
         }
         return self.lineGenerator(line);
     })
 });    

不偏移路径中间点的xy坐标会导致这些点在拖动节点 A 或 B 时保持静止。谁能解释如何计算xOffsetyOffset以便在拖动节点时路径将正确移动/旋转?或者,如果有人知道使用 D3.js 完成此任务的更好(阅读“更简单”!)方法,请告诉我。

更新:

这是图表构造函数中的线生成器代码:

this.lineGenerator = d3.svg.line() .x(function(d) { return dx; }) .y(function(d) { return dy; }) .interpolate("cardinal");

让我用一些图像来解释问题,希望它们能让我遇到的问题更清楚。线不是线性的问题,我的线是由线生成器弯曲的,但是当我拖动节点时,我希望曲线也拖动。因此,线上的所有点都必须更新以反映对节点位置所做的更改。换句话说,路径不能被正在移动的节点扭曲。

所以,在图片中;鉴于这种情况:

在此处输入图像描述

如果我将节点 B 向下和向左拖动,我希望看到如下内容:

在此处输入图像描述

(注意这是用图像编辑软件旋转的,因此背景也旋转了)

相反,我得到的是这样的:

在此处输入图像描述

请注意,当节点 B 移动时,线中的一个中间点如何保持静止,从而导致曲线扭曲。这是我试图避免发生的事情。

希望这可以使问题更清楚。

4

0 回答 0