在D3中，如何在转换运行时接收元素的当前X，Y坐标？

问题描述

根据此，我如何获得圈子的X&

你必须控制转换，并写一个自定义 tween 函数。这样你就可以控制每个动画步骤。这里有一些可运行的代码，用你自定义的补间替换了你的示例中的attrTween魔法。

  var svg = d3.select（body）.append（svg）.attr（width，200）.attr（height，200）; var circle = svg.append（circle）。 attr（id，circ）.attr（cx，Math.random（）* 200）.attr（cy，Math.random（）* 200）.attr（r，10 + px）; myTransf（）; function myTransf（）{circle.transition（）.duration（500）.each（end，function（）{myTransf（）;} d3.select（this），x = d3.interpolate（+ self.attr（'cx'），Math.random（）* 200），y = d3.interpolate（+ self.attr（'cy'）， random（）* 200）; return function（t）{var cx = x（t），cy = y（t）; self.attr（cx，cx）; self.attr（cy，cy） };}）;}  

  svg {border：1px solid #ccc;}  

 < script src = //cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js\"></script>  

Based on this answer, how can I get a live stream of the circle's X & Y coordinates while the transition is occurring?

解决方案

You'd have to take control of the transition and write a custom tween function. This way you control each animation step. Here's some runnable code replacing the attrTween magic in your example with a custom tween.

var svg = d3.select("body")
    .append("svg")
    .attr("width", 200)
    .attr("height", 200);

var circle = svg.append("circle")
		.attr("id", "circ")
    .attr("cx", Math.random() * 200)
    .attr("cy", Math.random() * 200)
    .attr("r", 10 + "px");
    
myTransf();

function myTransf() {
    circle.transition()
    	.duration(500)
      .each("end", function () {
          myTransf();
      })
      .tween("move", function() {
        var self = d3.select(this),
            x = d3.interpolate(+self.attr('cx'), Math.random() * 200),
            y = d3.interpolate(+self.attr('cy'), Math.random() * 200);
        return function(t) {
          var cx = x(t),
              cy = y(t);
          self.attr("cx", cx);
          self.attr("cy", cy);
        };
      });
}

svg {
    border:1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这篇关于在D3中，如何在转换运行时接收元素的当前X，Y坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！