需要帮助修改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可折叠力布局

回答

相关问题