d3 insert vs append在mousemove上创建节点的上下文中

Question

在下面的代码中,作者使用.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/

Answer 1

正如@altocumulus指出的那样,只是附加光盘的笔划倾向于阻止rect接收mouseover事件.您可以通过向圆圈添加填充来夸大效果.所以,这就是为什么insert()表现要好于append().

使追加工作的另一种方法是将侦听器放在svg元素上并利用事件冒泡.两者rect和circle mouseover事件都会冒泡到父母svg.

你可以通过摆弄这个来看到这一切......

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

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

            i = 1, c = 0,
            method = document.getElementById('metod'),
            fill = document.getElementById('fill'),
            remove = document.getElementById('remove'),

            SelectGroup = function (selectId, onUpdate) {

                var _selectedOptionById = function (id) {
                    var _node = document.getElementById(id);
                    return  function () {
                        return _node[_node.selectedIndex]
                    }
                },

                _selectedOption = _selectedOptionById(selectId);

                return {
                    update: function () {
                        onUpdate.apply(_selectedOption(), arguments)
                    },
                }
            },

            mouseListenerSelector = SelectGroup ('mouseListenerSelector',  function onUpdate (event, listener) {
                //this: selected option node
                //the node 'on' and 'off' attributes are selectors for the event listeners
                //enable the 'on' listener and remove the off listener
                var _selected = this,
                    switchOn = d3.select(_selected.getAttribute('on')),
                    switchOff = d3.select(_selected.getAttribute('off'));

                switchOn.on(event, listener);
                switchOff.on(event, null);
            }),

            rectEventsAuto = document.getElementById('rectEventsAuto'),
            //rectEventsAuto = document.getElementById('rectEventsAuto'),
            
            rect = svg.append("rect")
                .attr('id', 'rect')
                .attr({
                    "width": width,
                    "height": height
                })

            d3.select('#options').on('change', function () {

                svg.selectAll('circle').remove()
                applyListener(mouseListenerSelector, rectEventsAuto.value)

            })


            function applyListener(mouseListenerSelector, rectEventsAuto) {

                if (rectEventsAuto) {
                    rect.attr('style', null)
                } else {
                    rect.attr('style', 'pointer-events: all;')
                }

                mouseListenerSelector.update("mousemove.circles", particle)
                mouseListenerSelector.update(("ontouchstart" in document ? "touchmove" : "mousemove") + ".circles", particle)
            }

            applyListener(mouseListenerSelector, rectEventsAuto.value)


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

                circle = svg[method.value]("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)
                .style("fill", fill.value == 'solid' ? d3.hsl((i = (i + 1) % 360), 1, .5) : fill.value)
                .transition().duration(1000)
                .ease(Math.sqrt)
                .attr("r", 100)
            //.style("stroke-opacity", 1e-6)

            if (remove.value) { circle.remove() }
        }

body {
            margin: 0;
            background: #222;
            min-width: 960px;
        }

        rect {
            fill: none;
            pointer-events: all;
        }

        circle {
            fill: none;
            stroke-width: 2.5px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <div id="options">
        <select id="metod">
            <option value="insert">insert</option>
            <option value="append" selected="selected">append</option>
        </select>
        <select id="fill">
            <option value="solid" selected="selected">solid</option>
            <option value="none">no fill</option>
        </select>
        <select id="remove">
            <option value="true">remove</option>
            <option value="" selected="selected">don't remove</option>
        </select>
        <select id="mouseListenerSelector">
            <option value="true" on ="svg" off="rect">listener on svg</option>
            <option value="" selected="selected" on="rect" off="svg">listener on rect</option>
        </select>
        <select id="rectEventsAuto">
            <option value="true" selected="selected">pointer-events null; on rect</option>
            <option value="">pointer-events: all; on rect</option>
        </select>
    </div>