d3地理地图绘制在地图z顺序之上

Question

所以我使用 D3 之上的简单 Geomap 库来绘制地图。我现在要做的就是在渲染地图之前绘制我绘制的形状以显示在地图的“顶部”。

我知道我可以在渲染地图时在地图顶部绘制，但我想先在页面上绘制一些形状，然后渲染地图，但让我的原始形状出现在地图顶部（在它们出现在地图“下方”的那一刻）。

我创建了一个非常简单的 JSFiddle 来显示问题，尽管我不知道如何将“GeoMap”JS 代码包含为外部资源。希望这个例子足够简单，可以理解：http://jsfiddle.net/vqxf951t/2/

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


        d3.selection.prototype.moveToBack = function () {
            return this.each(function () {
                var firstChild = this.parentNode.firstChild;
                if (firstChild) {
                    this.parentNode.insertBefore(this, firstChild);
                }
            });
        }


        function finishedDrawingMap() {
            d3.select('#allParts')
                .append('g')
                .attr('id', 'blueRect')
                .append('svg')
                .append('rect')
                .style({
                'position': 'fixed',
                'left': '5px'
            })
                .attr('width', 1500)
                .attr('height', 300)
                .attr('fill', 'blue');


            d3.select('#yellowRect').moveToFront();
            d3.select('#blueRect').moveToFront();
        }


        $(document).ready(function () {
            allParts = d3.select('#mapDemo')
                .append('g')
                .attr('id', 'allParts');

            allParts.append('svg')
                .attr('id', 'yellowRect')
                .append('rect')
                .style({
                'position': 'fixed'
            })
                .attr('width', 800)
                .attr('height', 100)
                .attr('fill', 'yellow');

            allParts.append('svg')
                .attr('id', 'map')
                .attr('width', 800)
                .attr('height', 200)
                .style({
                'position': 'fixed',
                'left': '5px'
            })
                .style('opacity', 1);

            var map = d3.geomap()
                .geofile('../resources/js/plugins/d3.geomap/topojson/countries/USA.json')
                .projection(d3.geo.albersUsa)
                .scale(1000)
                .postUpdate(finishedDrawingMap);

            d3.select('#map').call(map.draw, map);
        });

该示例简单地创建了一个 SVG 'g' 元素，然后在该 'g' 内放置一个黄色矩形，然后绘制地图，然后在渲染地图时（即调用 'postUpdate() 函数），它会绘制一个蓝色矩形。

两个矩形都出现在地图下方，尽管我在地图渲染后绘制了蓝色的。

我尝试使用简单的 'moveToBack()' 和 'moveToFront()' 方法（我已在我的 JS 的其他部分成功使用），并且我可以在 WebDeveloper 工具中看到 HTML 确实具有 'map ' 在两个矩形之间，但我就是想不通为什么地图继续呈现在两个矩形的顶部...！？

谢谢，

拍拍

Answer 1

即使您在绘制地图之后添加蓝色矩形，它也会被添加到在创建地图 svg 之前创建的 g 元素中，因此它仍将位于“下方” map 在您的postUpdate 函数中，将另一个g 元素附加到allParts 并将矩形添加到其中，您应该会看到它出现在地图的顶部。使用一个有效的 jsfiddle，我可以验证这绝对是这种情况，但试一试。