在d3.js地图中，点隐藏在其他特征后面

我试着画一张印度地图，上面有一些点。我遵循代码库

---

除了要点外，一切都很好。它们隐藏在地图上其他要素的后面，因此不可见。如何对要素进行分层以使点可见？

在d3.js中，地图分层可以通过两种方式处理。如果这是您的代码（根据您的示例进行解释）

数据将根据回调函数完成的顺序添加到“g”元素中，因此有可能先绘制csv数据，然后再绘制json数据

---

我在这里介绍的第一种方法是在大多数情况下指定数据层顺序的最干净的方法（在我看来）。SVG“g”元素按指定顺序追加。这使您可以轻松控制数据分层：

var gBackground = svg.append("g"); // appended first
var gDataPoints = svg.append("g"); // appended second
// ... and so forth

然后，您所要做的就是指定将“g”元素/层数据附加/插入到哪个元素/层中。因此，您的代码看起来更像：

    d3.json("path.json",function (json) { 
       gBackground.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);
   });

    d3.csv("path.csv",function (csv) { 
       gDataPoints.selectAll("circle")
            .data(csv)
            .enter().append("circle")
            .attr("cx", function(d) { projection([d.x,d.y])[0] })
            .attr("cy", function(d) { projection([d.x,d.y])[1] })
            .attr("r",4);
   });

---

第二个选项将数据附加到同一个“g”元素，但通过在绘制第一个元素后，在绘制第一个元素的回调函数中绘制第二个层，确保控制数据的执行顺序：

为了使用此方法控制数据的顺序，我们将代码修改为：

    d3.json("path.json",function (json) { 
        g.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);

        // once the json is drawn, draw the csv:
        d3.csv("path.csv",function (csv) { 
           g.selectAll("circle")
                .data(csv)
                .enter().append("circle")
                .attr("cx", function(d) { projection([d.x,d.y])[0] })
                .attr("cy", function(d) { projection([d.x,d.y])[1] })
                .attr("r",4);
       });
   });

---

为了澄清，这些点是标出来的，但在地图的其余部分下面？@Andrew你能告诉我如何在图表上显示该点吗？我可能可以，但不清楚这些点是标出来的，还是标在地图的另一部分下面。你能澄清一下吗？这两种场景都不会直观地显示任何点，尽管在使用开发工具检查svg时，如果它们位于地图的另一层下方（或由于投影问题而在屏幕外），可以找到它们。@Andrew这些点位于地图下方。通过增加半径，可以看到地图外部（一半）的一个或两个点。

    d3.json("path.json",function (json) { 
        g.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);

        // once the json is drawn, draw the csv:
        d3.csv("path.csv",function (csv) { 
           g.selectAll("circle")
                .data(csv)
                .enter().append("circle")
                .attr("cx", function(d) { projection([d.x,d.y])[0] })
                .attr("cy", function(d) { projection([d.x,d.y])[1] })
                .attr("r",4);
       });
   });