0

所以我使用 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 确实具有“地图”in-在两个矩形之间，但我就是不明白为什么地图继续呈现在两个矩形的顶部......！？

谢谢，

拍。

4

1 回答 1

1

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

于 2015-02-17T23:17:41.623 回答