Question

我正在尝试显示来自Geojson文件的DMA映射，但是该映射不会加载。我认为这是一个缩放/定位问题，但我发现的任何修复方法均无效。寻找任何帮助。

var width = 960
        var height = 500

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


        d3.json("nielsenDMA.json", function(error, data) {
            if(error) throw error;

            var projection = d3.geoMercator().fitSize([width, height], geojson);
            var path = d3.geoPath().projection(projection);

            g.selectAll("path")
                .data(data.features)
                .enter()
                .append("path")
                .style("fill", "red")
                .style("stroke-width", "1")
                .style("stroke", "black");


        });

Answer 1

如果没有示例json文件或d3版本，则很难理解为什么地图渲染失败，因此，我假设以下内容，我想您可能想使用{ {3}}与此类似，并且您使用的是最新的d3版本。如文档所述，d3 v5中的d3.json函数只是基于fetch构建的解析实用程序。

fetch（）方法采用一个强制性参数，即您要获取的资源的路径。无论成功与否，它都会返回一个Promise并解析为对该请求的响应。您还可以选择传入init选项对象作为第二个参数（请参阅请求）。

重要的是它返回一个Promise，现在让我们看一下d3.json的文档

d3.json(input[, init])

在指定的输入URL处获取JSON文件。如果指定了init，则将其传递给对fetch的基础调用。

第二个可选参数是一个init对象，该对象使您可以通过访存请求控制许多不同的设置。

那么为什么您提供的代码不起作用？那么您提供的回调根本不会被调用。它将作为该函数的第二个参数传递，根本不会执行任何操作。

获取数据的正确方法是使用函数返回的Promise：

d3.json("url-to-retrieve")
  .then(data => {
     console.log(data);
  })
  .catch(err => {
     console.log(err);
  });

考虑到这一点，我们只需要对数据使用正确的投影，并注意使用的是topojson还是geojson文件。

在这种情况下，此geojson文件可与geoMercator投影配合使用。

d3.json("url-to-retrieve")
.then(data => {
  var width = 960,
    height = 500;
  // Create a projection fitted to our width/height
  var projection = d3.geoMercator() 
    .fitSize([width, height], data);
  // Creates a new geographic path generator
  var path = d3.geoPath()
    .projection(projection);

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

  svg.append("rect")
    .attr("class", "background")
    .attr("fill", "#cacaca")
    .attr("width", width)
    .attr("height", height);

  svg.append("g")
    .attr("id", "dmas")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append("path")
    .attr('fill', 'white')
    .attr('stroke', '#222')
    .attr('stroke-width', '2')
    .attr("d", path);

})
.catch(err => {
  console.log(err);
});

这里是带有以上代码的file。

D3 Geojson地图不会显示

1 个答案: