d3使用styleTween百分比轉換

Question

我有一個使用d3呈現的樹形圖。因爲我想要快速響應並且經濟（如果我真的不需要運行js），我使用div的百分比。但是過渡是使用百分比進行的某種有線連接。看完這個issue我已經嘗試了幾個styleTweens，但是我沒有任何運氣......

如何在d3中使用百分比值的轉換？

這裏是下面的代碼的小提琴：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) + "%") 
      }) 
      ;