变换后的 D3 节点位置答案

【问题标题】：D3 node position after transform变换后的 D3 节点位置
【发布时间】：2017-06-08 08:26:07
【问题描述】：

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

问题似乎与结合使用transition() 和变换函数（下例中的“myTransform”）有关。我只是不知道发生了什么。

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

<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>

【问题讨论】：

标签： d3.js transform positioning

【解决方案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"));
    });

应该为你做。

【讨论】：

两个问题：OP使用的是D3 v3，所以是.each("end", ...，而不是.on("end",...。除此之外，box 是一个转换选择，控制台不会显示转换。应该是console.log(d3.select("#myBox").attr("transform"));。
Gerardo 的建议更符合我的要求。但它不起作用。这是小提琴。 jsfiddle.net/c3bkvy8q/3