-1
喜可有一個人幫我彎曲的路徑喜歡這裏 
動態靈活的路徑
here u can see it in action（這幾乎是我需要的，但它在畫布上）
問題
我如何計算它？
該公式描述這個 以及如何正確地描述路徑的參數 'd'
這裏是我的代碼（也許它需要一些改進？）
var app = angular.module('app', []);
app.controller("ctrl", function ($scope) {
var lineGraph = d3.select("#container").append("svg:svg").attr("width", '100%').attr("height", '100%');
$scope.linesArr = [];
$scope.blocksArr = [{
id: 0,
x: 0,
y: 0,
lineToID: [2]
},{
id: 1,
x: 0,
y: 0,
lineToID: [0,2]
},{
id: 2,
x: 0,
y: 0,
lineToID: []
}];
$scope.createLines = function(){
for(var i = 0; i < $scope.blocksArr.length; i++){
if($scope.blocksArr[i].lineToID.length){
for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
$scope.linesArr[$scope.blocksArr[i].id + ":"+j] = (lineGraph.append("svg:line"));
}
}
}
};
$scope.createLines();
$scope.checkPoints = function(){
for(var i = 0; i < $scope.blocksArr.length; i++){
$scope.blocksArr[i].x = parseInt(document.querySelector('#b' + i).style.left) + (document.querySelector('#b' + i).offsetWidth/2);
$scope.blocksArr[i].y = parseInt(document.querySelector('#b' + i).style.top) + (document.querySelector('#b' + i).offsetHeight/2);
if($scope.blocksArr[i].lineToID.length){
for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
$scope.linesArr[$scope.blocksArr[i].id+":"+j]
.attr("x1", $scope.blocksArr[$scope.blocksArr[i].id].x)
.attr("y1", $scope.blocksArr[$scope.blocksArr[i].id].y)
.attr("x2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].x)
.attr("y2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].y)
.style("stroke", "rgb(6,120,155)");
//console.log();
}
}
}
};
$scope.dragOptions = {
start: function(e) {
//console.log("STARTING");
},
drag: function(e) {
$scope.checkPoints();
//console.log("DRAGGING");
},
stop: function(e) {
//console.log("STOPPING");
},
container: 'container'
}
});
app.directive('ngDraggable', function($document) {
return {
restrict: 'A',
scope: {
dragOptions: '=ngDraggable'
},
link: function(scope, elem, attr) {
var startX, startY, x = 0, y = 0,
start, stop, drag, container;
var width = elem[0].offsetWidth,
height = elem[0].offsetHeight;
// Obtain drag options
if (scope.dragOptions) {
start = scope.dragOptions.start;
drag = scope.dragOptions.drag;
stop = scope.dragOptions.stop;
var id = scope.dragOptions.container;
if (id) {
container = document.getElementById(id).getBoundingClientRect();
}
}
// Bind mousedown event
elem.on('mousedown', function(e) {
e.preventDefault();
startX = e.clientX - elem[0].offsetLeft;
startY = e.clientY - elem[0].offsetTop;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
if (start) start(e);
});
// Handle drag event
function mousemove(e) {
y = e.clientY - startY;
x = e.clientX - startX;
setPosition();
if (drag) drag(e);
}
// Unbind drag events
function mouseup(e) {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
if (stop) stop(e);
}
// Move element, within container if provided
function setPosition() {
if (container) {
if (x < container.left) {
x = container.left;
} else if (x > container.right - width) {
x = container.right - width;
}
if (y < container.top) {
y = container.top;
} else if (y > container.bottom - height) {
y = container.bottom - height;
}
}
elem.css({
top: y + 'px',
left: x + 'px'
});
}
}
}
})html,body, #container{
height: 100%;
margin: 0;
}
.box{
position: absolute;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #c07f7f;
text-align: center;
background: #f3f4ff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="ctrl" ng-app="app" id="container">
<div class="box" id="b{{$index}}" ng-repeat="i in blocksArr" ng-draggable='dragOptions' ng-style="{top: blocksArr[$index].y, left: blocksArr[$index].x}">{{$index}}</div>
</div>
歡迎來到堆棧溢出！請編輯你的問題，把你的代碼放在問題中（而不只是在另一個網站上）。然後，請澄清你的問題。你有什麼問題？你可以使靜態SVG看起來像你想要的？你不知道如何讓SVG看起來像你的願望？你要做什麼，出了什麼問題？ – Phrogz
嗨。 TNX。 現在好多了？ –
你已經包括了你的代碼（好工作），但是你還沒有描述你的問題，你想要什麼（具體）以及你的問題是什麼。 – Phrogz