d3.js(maps) svg 元素在现有 svg 元素之上添加时未出现答案

【问题标题】：d3.js(maps) svg elements not appearing when adding them on top of existing svg elementsd3.js(maps) svg 元素在现有 svg 元素之上添加时未出现
【发布时间】：2015-02-17 00:52:20
【问题描述】：

我正在使用 GeoJson 文件在 svg 对象上绘制 d3 地图多边形。

这样：

var g = svg.append("g")
                       .style("stroke-width", "1.5px");

d3.json(file, function (error, json) {

                    g.selectAll("path")
                        .data(json.features)
                        .enter()
                        .append("path")
                        .attr("class", function (d) {
                            return "subunit " + d.properties.id + " feature";
                        })
                        .attr("d", path)
                        .on("click", clicked);
                });

举个例子，我们可以说这是用国家视图绘制英国地图。

我有一个 GeoJson 文件（文件 2），涵盖英格兰境内的地区。所以我有一个 clicked 函数，你可以看到我处理的是哪个 (.on("click", clicked)。在 clicked 函数中，我处理第二个 geojson 文件并尝试将它的所有多边形（这是它的区域）附加到英格兰国家。我在某处读到 svg 根据填充时间对元素进行排序。我一直在检查元素，我的区域元素肯定会在完整的英国地图元素之后出现。它们只是不会出现。

我试过的：

我尝试将前一个 svg 对象（英格兰）的不透明度设置为 0。我尝试完全删除它，但没有成功。新的多边形不会显示。这是我尝试添加它们的方式。

                        var region = svg.append("region");

                    d3.json(scope.json.england_regions, function (error, json) {

// Set the opacity of the England country to 0
                        d3.select("path").style("opacity", 0); 
                        console.log(json);

                        region.selectAll("path")
                            .data(json.features)
                            .enter()
                            .append("path")
                            .attr("class", function (e) {
                                console.log(e);
                                return "region " + e.properties.id + " feature";
                            })
                            .attr("d", path)
                            .on("click", function (e) {
                                reset();

                            });

                    });
                }

我一直在调试 geojson（第二个 geojson 文件）以确保它确实被填充。哎呀，如果我自己加载它，它工作正常。我可以看到英格兰地区文件中的所有多边形。

还有其他人遇到过这个问题吗？我已经尝试搜索一些类似的场景，但我似乎无法找到其他人试图这样做的地方。

【问题讨论】：

标签： javascript css svg d3.js geo

【解决方案1】：

路径元素不是容器，不能有图形（路径）子元素。您需要使新的路径元素成为现有路径元素的兄弟。

【讨论】：

好的，这确实绘制了新的路径元素，但不是全部。所以最初有 4 条路径（英格兰、苏格兰、威尔士等）。当我执行 g.selectAll("path") 来渲染区域时。它只做其中的4个。剩下的 5-6 个没有出现。这就是我尝试创建另一个元素的原因。任何想法如何确保一切都完成？

【解决方案2】：

我不清楚 d3.js 中的 .enter() 方法是如何工作的。正如我在罗伯特朗森的回答中的评论中提到的那样，当我将我的新路径添加到现有的 g 元素时，它会切断前 4 个元素并且只显示其中的一些元素。那是因为 .enter() 通过比较键来工作。

要修复它，我必须执行 .selectAll() 以便 .enters 不会将其与现有路径进行比较。

有关 .enter() .append() 的更多信息，我从这里发现了这一点：http://knowledgestockpile.blogspot.co.uk/2012/01/understanding-selectall-data-enter.html

【讨论】：