Question

我有旧金山的topoJSON数据，我正在使用geoAlbers投影进行绘图。然而，由此产生的SVG非常小，就像一个微小的规格。我使用了scale和translate。 svg保持不变，或者从页面中消失。我已查看此链接：Center a map in d3 given a geoJSON object 有人能告诉我我做错了吗？

这是我的代码：

let width = 1050,
  height = 900;
const svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);

d3.json('/sfmaps/sfarteriesTopo.json', (error, topology) => {
  const b = topology.bbox;
  const streets = topojson.feature(topology, topology.objects.arteries).features;
   var projection = d3.geoAlbersUsa();
  var path = d3.geoPath().projection(projection);
  svg.selectAll('.streets')
          .data(streets)
          .enter().append('path')
          .attr('class', 'streets')
          .attr('d', path);

});

以下是我的尝试：

projection.scale(700)：移动小SVG的位置，但大小保持不变。
scale(700).translate([width/2, height/2])：再次转换位置，尺寸仍然相同。
scale(2)：SVG变小了。

我第一次尝试d3，所以任何指针都会受到赞赏。谢谢！

Answer 1

我发现我使用的是非常小的规模。为了解决这个问题，我使用了16000的比例并且效果很好。我从geoJSON对象的边界计算了比例。

D3投影绘制了一个非常小的SVG

1 个答案: