d3 中的过渡圆半径以取消缩放过渡--有效但计时已关闭

Question

这是一些示例代码和其中的一个小技巧：

var w = 400;
var h = 400;
var r = 20;
var factor = 5;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")");

svg.append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", r)
    .style("fill", "black");

svg.append("circle")
    .attr("cx", 150)
    .attr("cy", 150)
    .attr("r", r)
    .style("fill", "red");

svg.selectAll("circle")
    .transition()
    .duration(2000)
    .attr("transform", "scale(" + 1/factor +")")
    .attr("r", r*factor);

http://jsfiddle.net/o1wzfas7/2/

在示例中，我将两个圆缩小了 5 倍（这也缩放了它们的位置，从而使它们彼此“更接近”），同时将圆的半径放大了 5 倍。想法是它们看起来会在不改变大小的情况下彼此靠近（好像我正在改变它们的“cx”和“cy”属性），但由于某种原因，比例转换和半径转换似乎以不同的速率进行，因此您会看到圆圈变大，然后恢复到初始大小。

有谁知道我将如何使用比例和半径过渡来做到这一点，但是让两者相互抵消，这样圆圈的大小就不会发生变化？

Answer 1

首先，解释一下发生了什么：

问题在于，您所做的更改以相乘方式抵消，但转换以相加方式进行。

因此，对于您的简单示例，半径 (r) 从 20 开始，比例 (s) 从 1 开始（隐式）并且您正在转换 5 倍，圆的有效半径为 r*s ：

过渡开始时：

• r =20
• s =1
• r*s =20

过渡结束时：

• r =4
• s =5
• r*s =20

现在，您在脑海中的想法是，因素应该从 1 转变为 5，但这不是将要发生的事情。默认的转换函数看不到你的因子，他们只是看到半径从 20 转换到 4，比例从 1 转换到 5。

因此，在过渡的中点，每个属性将处于其开始值和结束值的中点（平均值）：

• r = (20+4)/2 = 12
• s = (1+5)/2 = 3
• r*s = 36

为了做你想做的事，你必须创建一个自定义补间，它直接转换因子，然后从那里计算半径和比例：

svg.selectAll("circle")
    .transition()
    .duration(2000)
    .tween("factor", function(d,i){
        /* create an interpolator for your factor */
        var f = d3.interpolateNumber(1,factor);

        /* store the selected element in a variable for easy modification */
        var c = d3.select(this);

        /* return the function which will do the updates at each tick */
        return function(t) {
           var f_t = f(t);
           c.attr("transform", "scale(" + 1/f_t + ")" );
           c.attr("r", r*f_t );
        };
     });

请注意，在您的实际应用程序中，您需要将因子转换的“开始”值存储在全局变量或每个数据对象中，因为当您转换到不同的缩放因子时，它不会自动为 1 .

var w = 400;
var h = 400;
var r = 20;
var factor = 5;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")");

svg.append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", r)
    .style("fill", "black");

svg.append("circle")
    .attr("cx", 150)
    .attr("cy", 150)
    .attr("r", r)
    .style("fill", "red");


svg.selectAll("circle")
    .transition()
    .duration(2000)
    .tween("factor", function(d,i){
        /* create an interpolator for your factor */
        var f = d3.interpolateNumber(1,factor);

        /* store the selected element in a variable for easy modification */
        var c = d3.select(this);

        /* return the function which will do the updates at each tick */
        return function(t) {
           var f_t = f(t);
           c.attr("transform", "scale(" + 1/f_t + ")" );
           c.attr("r", r*f_t );
        };
     });

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