需要帮助修改d3.js Collapsible Force Layout

问题描述

我修改了d3.js Collapsible Force Layout，其中节点以圆圈表示。

I am modifying the d3.js Collapsible Force Layout where the nodes are given as circles.

我将其更改为群组g并将圆附加到g中。问题是当我从

I changed it to a group g and attached the circle into the g. The problem is that in the tick function when I change from

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。

I have changed the reference to node so node refers to the group g in the second case.

我已经创建了强制布局，做了很多次，这个问题。
是因为d3.tree.layout？我不知道。请帮助。

I have created force layouts and have done this a lot of times but never faced this problem.Is it because of the d3.tree.layout? I don't know. Please help.

我已经尝试了更多的时间与其他svg元素，如文本和矩形，我发现，问题发生只有当涉及到的圈，我需要给属性像cx和cy到文本和rect，即使这些元素没有这些属性，让他们工作。

I have tried a few more times with other svg elements like text and rect and I found out that the problem occurs only when there is circle involved and I need to give attributes like cx and cy to text and rect even though these elements don't have these attributes, to make them work.

所以请帮助别人。完全混淆。

So please help someone. Totally confused.

代码::

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

这是生成错误图的代码。

Here's the code that generates the faulty graph.

推荐答案

问题是你设置坐标两次;对于实际元素和包含它们的 g ：

The problem is that you're setting the coordinates twice; on the actual elements and on the g containing them:

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 元素的翻译）：

This causes the offset. To fix, just set one of them (the translation on the g elements):

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 Collapsible Force Layout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！