Question

我试图创建一张印度地图，里面有一些点。我遵循了代码库 from here.

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

Answer 1

在d3.js中，地图分层可以通过两种方式处理。如果这是你的代码（从你的例子中解释）

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

    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);
   });

数据将根据回调函数的完成顺序添加到'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);
       });
   });

在d3.js地图中，点隐藏在其他要素后面

1 个答案: