Question

我试图在转换后得到节点的新位置。在这种情况下，我在屏幕上移动一个矩形。我希望能够在另一个上下文中访问矩形的变换，但这只显示节点的起始位置。如何获得节点的最终位置？

问题似乎与使用transition（）和转换函数（＆＃34; myTransform＆＃34;在下面的示例中）有关。我无法弄清楚发生了什么。

＆＃13;

var moveButton = d3.selectAll("#move");
moveButton.on("click", moveBox);

var myTransform = function(d) {
  return "translate(" + d.a + "," + d.b + ")";
};

var data = [{
  "a": 40,
  "b": 40
}];

var box = d3.selectAll("svg")
  .append("g")
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("id", "myBox")
  .attr("height", "50")
  .attr("width", "100")
  .attr("fill", "green")

function moveBox(d) {
  box = d3.select("#myBox")
    .transition()
    .attr("transform", myTransform);
    
    // How do I retrieve the transform?
    //console.log(box.attr("transform"));
}

＆＃13;

<html>

<head>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
  <form action="move">
    <input id="move" name="move" type="button" value="Move" />
  </form>
  <svg>
</svg>
</body>

</html>

＆＃13;

Answer 1

当然，所以您希望在转换完成后访问转换。您可以按using the transition's .on method执行此操作，如d3-transition和the life of a transition中所述。在这种情况下：

  box = d3.select("#myBox")
    .transition()
    .attr("transform", myTransform)
    .on('end', function() {
        console.log(box.attr("transform"));
    });

应该为你做。

变换后的D3节点位置

1 个答案: