Перетаскивание только горизонтально

Question

У меня есть узел, который подключен примерно к 5 другим узлам, тогда я могу перетащить этот узел в любом направлении, но если число подключенных узлов увеличивается примерно на 50, тогда перетаскивание этого узла происходит только в горизонтальное направление, неспособное перетащить этот узел вертикально. Я использую компоновку силы.

Что нужно сделать. Заранее спасибо

Это код:

scope.force.on("tick", function(e) {   
         var ky = 1.2 * e.alpha; 
      // scope.currentLinks are all links in graph 
         scope.currentLinks.forEach(function(d, i) { 
// d.source.properties.UI_HIERARCHY or d.target.properties.UI_HIERARCHY value ranges from 0 to 4 
        d.source.y += ((4 -(d.source.properties.UI_HIERARCHY)) * 80 - d.source.y) * ky; 
        d.target.y += ((4 -(d.target.properties.UI_HIERARCHY)) * 80 - d.target.y) * ky; 
         }); 
         scope.link.attr("x1", function (d) { 
           return d.source.x+15; 
          }) 
          .attr("y1", function (d) { 
           return d.source.y+15; 
          }) 
          .attr("x2", function (d) { 
           return d.target.x+15; 
          }) 
          .attr("y2", function (d) { 
           return d.target.y+15; 
          }); 

          scope.node.attr("transform", function (d) { 
           return "translate(" + d.x + "," + d.y + ")"; 
          });  
        } 
       }); 

Answer 1

Где это происходит стопорное y значение. Возможно в d.source.y или d.target.y для связи. Вероятно, y значительно меньше по сравнению с 15 и потому, что function (d) {return d.target.y+15;} всегда возвращается ~15.

Это может происходить в другом месте, а не только в tick().

См console.log() с помощью перетаскивания:

.attr("y1", function (d) { 
     console.log("y1 " + d.source.y+15);   
     return d.source.y+15; 
    })        
    .attr("y2", function (d) { 
     console.log("y2 " +d.target.y+15);   
     return d.target.y+15; 
    }); 

UPD:

if (e.type !== "drag") { 

    var ky = 1.2 * e.alpha; 
    scope.currentLinks.forEach(function(d, i) { 
     d.source.y += ((4 -(d.source.properties.UI_HIERARCHY)) * 80 - d.source.y) * ky; 
     d.target.y += ((4 -(d.target.properties.UI_HIERARCHY)) * 80 - d.target.y) * ky; 
    });       

} 

scope.node.attr("transform", function (d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}); 

scope.link.attr("x1", function (d) { 
    return d.source.x+15; 
}) 
.attr("y1", function (d) { 
    return d.source.y+15; 
}) 
.attr("x2", function (d) { 
    return d.target.x+15; 
}) 
.attr("y2", function (d) { 
    return d.target.y+15; 
});