Question

我正在尝试绘制英国地图并在其上绘制一些选定的点。我正在关注本教程的第一部分https://bost.ocks.org/mike/map/

这就是我所做的。

var svg = d3.select('body').append('svg')
.attr('height', height)
.attr('width', width)
.call(zoom);

d3.json("/data/uk.json", function(error, uk) {

   if (error) return console.error(error);

  var subunits = topojson.feature(uk, uk.objects.subunits);
  var projection = d3.geo.albers()
                 .center([0, 55.4])
                 .rotate([4.4, 0])
                 .parallels([50, 60])
                 .scale(6000)
                 .translate([width / 2, height / 2]);

var path = d3.geo.path()
          .projection(projection);
svg.append('path')
         .datum(subunits)
         .attr('d', path);

svg.selectAll('.subunit')
    .data(topojson.feature(uk, uk.objects.subunits).features)
    .enter().append('path')
    .attr('d', path);

这是我试图绘制点的部分

d3.json('/data/places.json',  function (error , result) {

    if(error)
      console.error(error);

    svg.append('path')
              .data(result.features)
              .style('stroke', 'green')
              .attr('d' , d3.geo.path().projection(projection))
  });

上面的代码只绘制了地图上的一个点，即JSON文件中的第一个

Answer 1

使用

时，您没有正确绑定功能的数据

svg.append('path')
   .data(result.features)
   .style('stroke', 'green')
   .attr('d' , d3.geo.path().projection(projection))

这会追加一条路径，将result.features的第一个元素绑定到此路径，并相应地设置样式和属性。

要按照您想要的方式工作，您需要使用D3的data joining机制。

svg.selectAll('path.features')
   .data(result.features)
  .enter().append('path')
    .attr('class', 'feature')
    .style('stroke', 'green')
    .attr('d' , d3.geo.path().projection(projection))

这将为result.features中的要素计算data join，将新元素放入输入选择中，可通过调用选项上的enter()来访问。使用此输入选择，您现在可以为所有功能添加路径。

与您的问题没有直接关系的另一个附注：根据要添加到地图的要素数量，可能会经常调用.attr("d") setter。您可以通过重用路径生成器的一个实例来提高性能：

var geoPath = d3.geo.path().projection(projection);  // You need just one instance

svg.selectAll('path.features')
   .data(result.features)
  .enter().append('path')
    .attr('class', 'feature')
    .style('stroke', 'green')
    .attr('d' , geoPath)                             // Re-use the path generator

这被认为是最佳实践，应该普遍应用。

d3.path仅绘制要素集的第一个特征

1 个答案: