需要幫助修改d3.js可折疊力布局

Question

我正在修改d3.js可折疊力布局，其中節點以圓圈形式給出。

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

我將其更改為組g，並將圓附加到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嗎？ 我不知道。 請幫忙。

我對其他svg元素（例如text和rect）進行了多次嘗試，我發現問題僅在涉及圓圈時才會發生，並且我需要為文本和rect提供cx和cy這樣的屬性，即使這些元素沒有具有這些屬性，以使其起作用。

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

碼：：

    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 + ")";
    });
}

這是生成錯誤圖形的代碼。

Answer 1

問題是您要設置兩次坐標； 在實際元素上以及在包含它們的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