d3 svg在IE中引入前沿

Question

在各个地方提供了解决方案，包括here，它在Firefox和Chrome中运行良好。但它在IE中断了（我使用的是IE 11）。

基本思想是在mouseover监听器

中执行此操作

    this.parentNode.appendChild(this);

由于节点只能有一个父节点，因此在重新附加到子节点末尾之前删除原始引用。

通常mouseover事件仅在初始mouseover上触发一次，但是，append似乎重置了IE中元素的事件，因此事件会在下一个{{ 1}}。这会导致mousemove事件的行为类似于mouseover，并且还会停止鼠标操作。

在IE中，没有报告mousemove个事件

可以通过首先从元素中删除事件然后在超时后重新附加它来修复它，但还有另一种方法吗？

＆＃13;

＆＃13;

mouseout

＆＃13;

(function () {
	d3.selection.prototype.moveToFront = function () {
		return this.each(function () {
			this.parentNode.appendChild(this);
		});
	};

	var log = d3.select('#output'), counter = 0

	var svg = d3.select("body").append('svg');

	var data = d3.range(10);

	var circles = svg.selectAll("circle")
			.data(data)
			.enter()
			.append("circle")
			.attr({
				cx: function (d, i) { return d * 20 + 100 },
				cy: 50,
				r: 20,
				fill: "#aaa",
				stroke: "#000"
			})
			.on("mouseover", function () {
				var sel = d3.select(this);
				sel.moveToFront();
				logEvent();
			})
			.on("mouseout", logEvent);
	function logEvent() {
		var e = d3.event, node,
				message = counter++ + ' ' + e.type + ': ' + e.target.tagName + ' ---> ' + e.currentTarget.tagName
		console.log(message)
		node = log.html(log.html() + '<p class="' + e.type + '">' + message + '</p>').node();
		node.scrollTop = node.scrollHeight;
	}
})()

＆＃13;

#output {
      height: 100px;
      overflow:scroll;
    }
    p {
      margin:0;
    }
    .mouseover {
      color: red;
    }
    .mouseout {
      color: green;
    }

＆＃13;

＆＃13;

＆＃13;