Question

我使用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);
                });

因此，例如，可以说这是用国家视图绘制英国地图。

Uk country view

我有一个GeoJson文件（文件2），涵盖英格兰境内的地区。所以我有一个点击的功能，你可以看到我处理的内容（.on（＆＃34;点击＆＃34;，点击）。在点击的功能中，我处理第二个geojson文件，并尝试附加所有这些文件＆＃39; s多边形（它是它的区域）到英格兰国家。我在某地读过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文件）以确保它肯定会被填充。哎呀，如果我自己加载它工作正常。我可以看到英格兰地区文件中的所有多边形。

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

Answer 1

路径元素不是容器，也不能包含图形（路径）子元素。您需要创建现有路径元素的新路径元素兄弟。

Answer 2

我不清楚d3.js中的.enter（）方法是如何工作的。正如我在Robert Longson的回答中提到的那样，当我将新路径添加到现有g元素时，它正在切断前4个元素并仅显示其中的一些元素。那是因为.enter（）通过比较键来工作。

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

有关.enter（）。append（）的更多信息，我在以下地址找到了这一点：http://knowledgestockpile.blogspot.co.uk/2012/01/understanding-selectall-data-enter.html

d3.js（maps）svg元素在现有svg元素的顶部添加时不会出现

2 个答案: