javascript - 将地图点添加为一层

Question

我正在使用以下方法从 json 文件中添加点：

svg.selectAll("circle")
  .data(places.features)      
  .enter()
  .append("circle")
  .attr('cx', function(d) { d.geometry.coordinates)[0]})
  .attr('cy', function(d) { return proj(d.geometry.coordinates)[1]})  
  .attr("r", function(d) { 
      if (d.properties.category == 'a'){           
        return 2
      }else if (d.properties.category == 'b'){            
        return 4
      }else if (d.properties.category == 'c'){            
        return 6
      }
    });

我一直在 Adob​​e Illustrator 中调整地图，我意识到我没有将点作为一个组添加到地图中；相反，由于我是如何构建的，每个点都是一个单独的层。如何将点添加为一个图层组？

我以以下方式构建了svgand ：proj

var width = 1000,
    height = 900,
    radius = 340; 

var proj = d3.geo.naturalEarth()    
    .scale(200) 
    .translate([width / 2 , height/2])

var path = d3.geo.path()
    .projection(proj);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

Answer 1

将它们放在一个组中：

svg.append('g').selectAll("circle")
  .data(places.features)
  .enter()

Answer 2

您可以使用SVG<g>元素将图形元素组合在一起。“g”没有任何自己的视觉表示。它的唯一目的是对其他元素进行分组。