Question

我正在修改d3.js可折叠力布局，其中节点以圆圈形式给出。

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

我将它改为g组并将圆圈附加到g中。问题是，当我从

更改时，在tick函数中

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元素，如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

需要帮助修改d3.js可折叠力布局

1 个答案: