将地图点添加为一个图层

时间:2013-09-18 17:04:17

标签: javascript d3.js maps

我正在使用以下方法从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
      }
    });

我一直在调整Adobe Illustrator中的地图,我意识到我不会将这些点作为一个组添加到地图中;相反,由于我如何构造它,每个点都是一个单独的层。如何将点添加为一个图层组呢?

我通过以下方式构建了svgproj

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

2 个答案:

答案 0 :(得分:1)

将他们放在一个小组中:

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

答案 1 :(得分:0)

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