d3.js找到给定对象的路径

Question

我正在寻找是否有一种实用方法来获取给定的svg元素并找到相应的路径。目的是能够跟踪类似于http://jsfiddle.net/Lqmzztw1/的对象轮廓。我想在这里使用一种说明http://bl.ocks.org/duopixel/4063326的技术，因为它似乎接近我想要的。我正在寻找这个能够跟踪任何多边形/形状/圆形等的轮廓。有没有办法将给定的SVG元素转换为d3中相应的路径？

小提琴代码

var svg = d3.selectAll('div').append('svg').attr({
    height:500,
    width: 500
});

var box = svg.append('rect').attr({
    x: 20,
    y: 20,
    height:50,
    width:50,
    fill: 'blue'
});

box.on('click',function(){

    var cornerBox = svg.append('rect').attr({
        x:15,
        y:15,
        width:10,
        height:10,
        fill:'orange'
    });

    cornerBox.transition().attr({
        x: 50+15
    }).duration(150).transition().attr({
        y: 50+15
    }).transition().attr({
        x:15
    }).duration(150).transition().attr({
        y:15
    }).duration(150);
});