javascript - 使用 styleTween 进行带百分比的 d3 过渡

Question

我有一个用 d3 渲染的树形图。因为我想要响应迅速且经济(如果我真的不需要，则不运行 js)，所以我对 div 使用百分比。但转换是某种使用百分比的连线。读完这篇issue我尝试了几种 styleTweens 但我没有任何运气......

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

这是以下代码的 fiddle :http://jsfiddle.net/0z7p68wb/ (只需单击树形图上的某个位置即可开始动画)

var target = d3.select("#target")
render = function(data, oldData) {
                    // our custom d3 code
                    console.log("render!", data, oldData);

                    // draw rectangles
                    var margin = {margin: 0.2, padding: 2},
                        width = 100 - margin.margin * 2,
                        height = 100 - margin.margin * 2;

                    var treemap = d3.layout.treemap()
                            .size([100, 100])
                            //.sticky(true)
                            .value(function(d) { return d.size; });

                    // bind data
                    var nodes = target.datum(data)
                        .selectAll(".node")
                        .data(treemap.nodes);

                    // transform existing nodes
                    if (data !== oldData)
                        nodes.transition()
                            .duration(1500)
                            .call(position);

                    // append new nodes
                    nodes.enter().append("div")
                        .attr("class", "node")
                        .style("position", "absolute")
                        .style("display", function(d,i) { return i==0 ? "none" : "block"})
                        .style("background-color", "silver")
                        .call(position)
                        ;


                    // remove obsolete nodes
                    nodes.exit().remove();

                    // set position of nodes
                    function position() {
                        this.style("left", function(d) { return d.x + "%"; })
                            .style("top", function(d) { return d.y + "%"; })
                            .style("width", function(d) { return Math.max(0, d.dx) + "%"; })
                            .style("height", function(d) { return Math.max(0, d.dy) + "%"; })
                    }
                }

tree1 = {
            name: "tree",
            children: [
                { name: "Word-wrapping comes for free in HTML", size: 16000 },
                { name: "animate makes things fun", size: 8000 },
                { name: "data data everywhere...", size: 5220 },
                { name: "display something beautiful", size: 3623 },
                { name: "flex your muscles", size: 984 },
                { name: "physics is religion", size: 6410 },
                { name: "query and you get the answer", size: 2124 }
            ]
        };

tree2 = {
            name: "tree",
            children: [
                { name: "Word-wrapping comes for free in HTML", size: 8000 },
                { name: "animate makes things fun", size: 10000 },
                { name: "data data everywhere...", size: 2220 },
                { name: "display something beautiful", size: 6623 },
                { name: "flex your muscles", size: 1984 },
                { name: "physics is religion", size: 3410 },
                { name: "query and you get the answer", size: 2124 }
            ]
        };

tree = tree1;
render(tree, tree);

d3.select("#target").on("click", function(){
    console.log("click");
    tree = tree == tree1 ? tree2 : tree1;
    render(tree, {});
});

Answer 1

明白了!

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