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

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

d3 geomap绘制在地图z-order之上

1 个答案: