在d3.js动画中嵌入SVG形状

Question

我创建了一个jsfiddle here。我需要做几件事。

1. 如何将svg代码（从现有形状）正确嵌入到d3.js动画中？我的svg弹了两次。

2. 如何将svg附加到另一个形状，以便两个形状同时进行动画？

            #slider {         宽度：490px;     }     #_rb {         颜色：＃000;     }                  五          

JavaScript的：

var width = 500,
    height = 500,
    minRadius = 10,
    maxRadius = 250,
    minHeight = 100,
    maxWidth = 500;

var duration = 5000;

d3.select("body").append("input")
    .attr("type", "range")
    .attr("id", "slider")
    .attr("min", 1000)
    .attr("max", 10000)
    .attr("value", duration)
    .on("change", function () {
    duration = this.value;
    d3.select("#_rb").property("value", d3.round(duration / 1000));
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", minRadius)
    .style("fill", "steelblue")
    .call(transition, minRadius, maxRadius);

svg.append("use")
    .attr("xlink:href", "#Layer_1")
    .attr("width", width / 2)
    .attr("height", height / 2)
    .attr("x", 100)
    .attr("y", 100)
    .call(transition, minHeight, maxWidth);

function transition(element, start, end) {
    element.transition()
        .duration(duration)
        .attr("r", end)
        .attr("height", end)
        .attr("width", end)
        .each("end", function () {
        d3.select(this).call(transition, end, start);
    });
}