小编ela*_*con的帖子

在下面的代码中,作者使用.insert在矩形"之前"定位圆圈(实际上它们出现在我相信的顶部),而不是直接将它们附加到svg空间.

我认为这是不必要的,所以删除了rect和.insert并将圆元素直接附加到svg空间.然而结果是圆圈没有"足够快地绘制"(因为缺乏更明确的解释).

任何人都可以向我解释为什么会发生这种情况或指向一些解释它的文献的方向吗？

var width = Math.max(900, innerWidth),
    height = Math.max(700, innerHeight)

var svg = d3.select("body").append("svg")
    .attr({
        "width": width,
        "height": height
    })

var i = 1;

svg.append("rect")
    .attr({
        "width": width,
        "height": height
    })
    .on("mousemove", particle)

function particle() {
    var m = d3.mouse(this)

    var circle = svg.insert("circle", "rect")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("r", 10)
        .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
        .style("stroke-opacity", 1)
        .transition().duration(1000)
        .ease(Math.sqrt)
        .attr("r", 100)
        .style("stroke-opacity", 1e-6)
}

感谢并感谢http://techslides.com/over-1000-d3-js-examples-and-demos.

我创建了一个jsfiddle @ http://jsfiddle.net/hiwilson1/mgchrm0w/