Javascript 使用styleTween的d3转换和百分比

我用d3绘制了一个树状图。因为我希望反应迅速且经济（如果我真的不需要的话，就不要运行js），所以我对div使用百分比。但这种转变是通过百分比实现的。读了这篇文章后，我尝试了几款styleTweens，但我没有任何运气

如何在d3中使用百分比值的转换

下面是一些代码：（只需单击树形图上的某个位置即可开始动画）

明白了

    // transform existing nodes
    if (data !== oldData)
        nodes.transition()
            .duration(1500)
            .call(position)
            .styleTween('left', function(d,i,a){
                return d3.interpolateString(this.style.left, d.x + "%")
            })
            .styleTween('top', function(d,i,a){;
                return d3.interpolateString(this.style.top, d.y + "%")
            })
            .styleTween('width', function(d,i,a){;
                return d3.interpolateString(this.style.width, Math.max(0, d.dx) + "%")
            })
            .styleTween('height', function(d,i,a){;
                return d3.interpolateString(this.style.height, Math.max(0, d.dy) + "%")
            })
            ;

    // transform existing nodes
    if (data !== oldData)
        nodes.transition()
            .duration(1500)
            .call(position)
            .styleTween('left', function(d,i,a){
                return d3.interpolateString(this.style.left, d.x + "%")
            })
            .styleTween('top', function(d,i,a){;
                return d3.interpolateString(this.style.top, d.y + "%")
            })
            .styleTween('width', function(d,i,a){;
                return d3.interpolateString(this.style.width, Math.max(0, d.dx) + "%")
            })
            .styleTween('height', function(d,i,a){;
                return d3.interpolateString(this.style.height, Math.max(0, d.dy) + "%")
            })
            ;