Question

在下面的代码中，作者使用.insert定位圆圈＆＃34;之前＆＃34;矩形（实际上它们出现在我相信的顶部），而不是直接将它们附加到svg空间。

我认为这是不必要的，因此删除了rect和.insert并将圆元素直接附加到svg空间。然而，结果是圈子不能足够快地抽出＆＃39; （缺乏更明确的解释）。

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

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。

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

＆＃13;

        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() }
        }

＆＃13;

body {
            margin: 0;
            background: #222;
            min-width: 960px;
        }

        rect {
            fill: none;
            pointer-events: all;
        }

        circle {
            fill: none;
            stroke-width: 2.5px;
        }

＆＃13;

<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>

＆＃13;

Answer 2

对我而言，即使在全屏模式下，两种方法之间的性能也没有真正的差异。我认为选择insert()而不是append()的原因在于处理鼠标事件。 SVG 1.1规范在hit-testing上声明：

此规范未定义指针事件的行为最基本的'svg'元素用于嵌入的SVG图像引用或包含在另一个文档中，例如，是否嵌入在HTML文档中的rootmost'svg'元素拦截鼠标点击事件;未来的规范可能会定义这种行为，但对于本规范的目的，行为是实现特定的。

在<rect>之前插入圈子可确保<rect>始终呈现在所有圈子的顶部。此外，在pointer-events: all上设置<rect>会将其设置为接收任何鼠标事件的第一个目标。这样，您就可以实现干净的实现，而不依赖于呈现嵌入式svg的用户代理的特定于实现的行为。

Answer 3

据我所知，从文档中可以看出：

插入应该，如果有的话，比追加慢一点，因为它似乎需要一些额外的检查，以防前选择器不匹配任何东西。

除此之外，我同意@ user3906922留下的评论，从2个小提琴判断，两者之间的表现似乎没有太大差异。

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

3 个答案: