Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
当第一个或最后一个点更改时,重新计算SVG路径中的点_Svg_D3.js - Fatal编程技术网

当第一个或最后一个点更改时,重新计算SVG路径中的点

当第一个或最后一个点更改时,重新计算SVG路径中的点,svg,d3.js,Svg,D3.js,我已经用D3.js构建了一个基于的图形,但是在节点之间没有直线,而是使用SVG路径元素创建了曲线。单个链路的数据结构包括表示链路连接到的节点的源和目标。链接数据结构还包含一个line元素,其中包含定义路径的点数组。链接的数据结构如下所示: { id:4, type:"link", fixed:true, source: { id:1, name: "A",

我已经用D3.js构建了一个基于的图形,但是在节点之间没有直线,而是使用SVG路径元素创建了曲线。单个链路的数据结构包括表示链路连接到的节点的源和目标。链接数据结构还包含一个line元素,其中包含定义路径的点数组。链接的数据结构如下所示:

{
    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.x、d.source.y和d.target.x、d.target.y获得了节点A和B的当前x和y坐标。我还有节点A(d.line的第一个元素)和节点B(d.line的最后一个元素)的初始位置。我试图做的是根据对节点A和B的位置所做的更改,重新计算第一个点和最后一个点之间的点

以下是我的即时事件处理程序:

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);
     })
 });    
force.on(“勾号”,函数(){
svg.selectAll(“g.node”).attr(“transform”,函数(d){return“translate”(+d.x+),“+d.y+”);});
svg.selectAll(“g.link.line”).attr(“d”,函数(d){
var xOffset=0,//要计算此值吗
yOffset=0;//要计算此值吗
var行=[];

对于(var i=0;iYou没有给我们提供直线生成器的定义,但听起来您使用的是直线段。使用Bezier曲线或类似的东西可能更容易,浏览器将自动计算中间点。有关SVG路径可用命令的更多详细信息。(更新后)听起来你想做的事情应该在直线生成器中完成。也就是说,与其尝试移动中间给定点,不如在直线生成器中动态计算它们。可能你已经使用了类似的方法来计算中间点了?不,直线的曲线不是在第一位计算的,而是s是由用户创建的。如果您查看肘部连接,您将看到一个模糊的圆形,当用户将鼠标悬停在其上时,这些圆形亮显为红色,并允许他们拖动线条。用户可以向路径添加新点,然后拖动它们以创建所需的路径。但是,当拖动节点时,用户创建的此路径不得扭曲。我不知道知道如何使用直线生成器根据对路径中第一个点和最后一个点所做的更改重新计算中间点。换句话说,在我给出的示例中,我不需要计算新曲线中的所有点,我想知道如何计算一个点的新位置;肘节处的一个点。Onc我已经正确地移动了它,然后我可以用直线生成器重新计算所有其他点。嗯,所以你基本上想对用户移动到肘点的点应用相同的平移?你试过这样做吗?