需要幫助修改d3.js可摺疊力佈局

我正在修改d3.js摺疊力佈局，其中節點以圓形形式給出。需要幫助修改d3.js可摺疊力佈局

http://bl.ocks.org/mbostock/1062288

我改成一組g，和所附的圓圈進入克。問題是，在蜱功能時我改變從

node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; });

到

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

的節點都是流離失所。

我已經改變了對節點的引用，因此節點在第二種情況下引用了組g。

我已經創建了強制佈局，並且做了很多次，但從未遇到過這個問題。是因爲d3.tree.layout？我不知道。請幫忙。

Initial nodes

Displaced nodes

我已經嘗試了幾次與其他SVG元素，如文本和正確，而且我發現，只有當有圈介入出現問題，我需要給像屬性cx和cy到文本和rect即使這些元素沒有這些屬性，使它們工作。

所以請幫助別人。完全困惑。

代碼::

var link = svg.selectAll(".link"), 
     node = svg.selectAll(".node"); 

    link = link.data(force.links()); 

    // Exit any old links. 
    link.exit().remove(); 

    // Enter any new links. 
    link.enter().insert("line",".node") 
     .attr("class", "link") 
     .attr("x1", function(d,i) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    // Update the nodes… 
    node = node.data(force.nodes(), function(d) { return d.id; }).style("fill", color); 

    // Exit any old nodes. 
    node.exit().remove(); 

    // Enter any new nodes. 
    node.enter().append("g") 
     .attr("class", "node") 
     .attr("title",function(d) { return d.name || d.layout; }) 
     .on("click", click) 
     .call(force.drag); 

     node.append("circle") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", function(d) { return 4.5; }) 
     .style("fill", color); 

     node.append("text") 
     .attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .attr("fill","red") 
     .attr("stroke","red")   
     .style("font-size","9px") 
     .on("click",click) 
     .text(function(d){return d.name}) 
     .call(force.drag); 


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

    // node.attr("cx", function(d) { return d.x; }) 
    //  .attr("cy", function(d) { return d.y; }); 

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

下面是產生錯誤的圖形代碼。

來源

2014-03-01 sushmit sarmah

你是什麼意思的「節點都是流離失所」？如果沒有其他的東西混在一起，上面應該可以工作。 – AmeliaBR

我的意思是節點不再處於相應鏈接的末端，而是移動到應該在的位置的右側和底部。是的，它通常是有效的，我已經完成了很多力量佈局。在這種情況下唯一的區別是我使用d3.layout.links（節點）來獲取鏈接。 –

我附上了2個截圖，我所做的唯一改變是從使用cx，cy改爲使用轉換 –

問題是你設置座標兩次;在實際的元件和包含它們的g：

node.append("circle") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", function(d) { return 4.5; }) 
    .style("fill", color);

（類似地對於text元素）和

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

這導致的偏移量。要修復，只需設置其中一個（在g元素上的譯文）：

node.append("circle") 
    .attr("r", function(d) { return 4.5; }) 
    .style("fill", color); 
node.append("text") 
    .attr("fill","red") 
    .attr("stroke","red") 
    // etc

來源

2014-03-02 14:59:24

需要幫助修改d3.js可摺疊力佈局

回答

相關問題