Question

我使用基于this example of a force-directed graph的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 事件处理程序中，我有 x 和 y 坐标 A 的坐标和 B 通过引用 d.source.x ， d.source.y 和 d.target.x ， d.target.y 。我还有节点A（ d.line 的第一个元素）和节点B（ d.line 的最后一个元素）的初始位置。我要做的是根据对节点 A 和 B 的位置所做的更改，重新计算第一个点和最后一个点之间的点。

这是我的 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);
     })
 });

不偏移路径中间点的 x 和 y 坐标导致这些点在拖动节点A或B时保持静态。任何人都可以解释如何计算 xOffset 和 yOffset ，以便在拖动节点时路径将正确移动/旋转？或者，如果有人知道更好的（阅读＆＃34;更容易＆＃34;！）用D3.js完成此任务的方式，请告诉我。

更新：

这是图表构造函数中的行生成器代码：

this.lineGenerator = d3.svg.line（） .x（function（d）{return d.x;}） .y（function（d）{return d.y;}） .interpolate（＆＃34;基数＆＃34）;

让我用一些图片来解释这个问题，希望他们能解决我更清楚的问题。这不是线条线条的问题，我的线条被线条生成器弯曲，但是当我拖动一个节点时，我也想要拖动曲线。因此，必须更新该行上的所有点以反映对节点位置所做的更改。换句话说，路径不能被被移动的节点扭曲。

所以，在图片中;鉴于这种情况：

enter image description here

如果我将节点B向下拖动到左侧，我希望看到如下内容：

enter image description here

（请注意，这是使用图像编辑软件旋转的，因此背景也会旋转）

相反，我得到的是这样的东西：

enter image description here

注意当移动节点B时，线中的一个中间点如何保持静态，导致曲线失真。这就是我试图避免发生的事情。

希望这会使问题更加清晰。

当第一个或最后一个点发生变化时，重新计算SVG路径中的点

0 个答案: