d3強制佈局鏈接在節點中的位置

我一直在閱讀關於d3強制佈局的幾個問題，但是我還沒有找到我的答案，所以我發佈了這個。d3強制佈局鏈接在節點中的位置

我正在使用D3庫，特別是與力佈局。我沒有向節點添加預定義的形狀，而是創建了自己的形狀，如圓形，矩形等等。

var shapes = { 
     star : "m 0 0 l 23 12 l -4 -26 l 19 -19 l -27 -4 l -11 -23 l -12 23 l -27 4 l 19 19 l -4 26 l 24 -12", 
     rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0", 
     vertical_rect : "M 0 0 L 0 "+ 2 * rect_size + "L "+ rect_size + " "+ 2 * rect_size + " L "+ rect_size + " 0 L 0 0", 
     circle: "M 0 0 A "+ radius + " " + radius +" 0 1 0 0.00001 0 Z" 
     }; 
var dummy_nodes = {}; 
var dummy_shapes = {"A" : shapes.circle, "B" : shapes.rect, "C" : shapes.rect, "D" : shapes.circle}; 

    // Compute the distinct nodes from the links. 
links.forEach(function (link) { 
     link.source = dummy_nodes[link.source] || (dummy_nodes[link.source] = 
                { name: link.source, shape: dummy_shapes[link.source]}); 
     link.target = dummy_nodes[link.target] || (dummy_nodes[link.target] = 
                { name: link.target,shape: dummy_shapes[link.target]}); 
    }); 
var force = d3.layout.force() 
     .nodes(d3.values(dummy_nodes)) 
     .links(links) 
     .size([960, 500]) 
     .linkDistance(200) 
     .charge(-1500) 
     .on("tick", tick) 
     .start(); 
var svg = d3.select("body").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 
var node = svg.append("svg:g").selectAll(".node") 
     .data(force.nodes()) 
     .enter().append("path") 
     .attr("class", "node") 
     .attr("d", function(n){ return n.shape}) 
     .on("dblclick", dblclick) 
     .call(drag);

您可以查看整個代碼here

我不明白我怎麼可以改變至極的位置圖的鏈接（或邊）輸入的每個節點。

例如：我想從位於矩形中心的矩形節點而不是左上角（我猜是位置0,0）出來的邊緣。我現在必須有一些與SVG每個形狀的CX和CY有關的東西，但這是我無法理解的。

我希望我的問題是清楚的，隨便問什麼，我可能已經離開了

謝謝！

來源

2014-06-11 Fran Gimenez

您可以設置數據項的'x'和'y'屬性來設置初始位置。 –

只是讓你的形狀，即起源的中心，而不是定義一個矩形作爲

rect : "M 0 0 L 0 "+ rect_size + "L "+ 2 * rect_size + " "+ rect_size + " L "+ 2 * rect_size + " 0 L 0 0",

把它定義爲

rect : "M " + -rect_size + " " + (-rect_size/2) + " h " + 2 * rect_size + " v " + rect_size + " h "+ (-2 * rect_size) + " z",

我從L到H，V和z，以交換它更簡單。你可以用其他形狀做同樣的事情。

來源

2014-06-11 12:58:02

謝謝！那就是訣竅 –

d3強制佈局鏈接在節點中的位置

回答

相關問題