D3.js Geo投影呈现一个黑匣子

发布于 2025-01-29 01:26:09 字数 1643 浏览 0 评论 0原文

我正在尝试使用d3.js制作美国地图。

我使用以下代码绘制地图：

const EDUCATION =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json';
const COUNTY =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json';

const W = 1000
const H = 500
const M = { top: 30, right: 30, bottom: 30, left: 30 }
const P = { top: 30, right: 30, bottom: 30, left: 30 }

function draw(W, H, M, P, COUNTY, EDUCATION) {
  
  const geoJson = topojson.feature(COUNTY, COUNTY.objects.counties)
  
  const projection = d3.geoMercator().fitSize([W, H], geoJson)
 
  const path = d3.geoPath(projection)
  
  const svg = d3
  .select("#container")
  .append("svg")
  .attr("class", "svg-area")
  .attr("width", W)
  .attr("height", H)
  
  const map = svg
  .append('g')
  .selectAll("path")
  .data(geoJson.features)
  .enter()
  .append("path")
  .attr('class', 'counties')
  .attr('d', path)
}

Promise
.all([d3.json(COUNTY), d3.json(EDUCATION)])
.then(data => draw(W, H, M, P, data[0], data[1]))
.catch(err => console.log(err));

该地图太大，因此，我决定使用propption.fitsize（）方法将其缩小。我跟随

如果没有const professution = d3.GeomerCator（）。fitsize（[[W，H]，Geojson）投影成功绘制了映射。但是，有些事情发生了一些奇怪的事情：我看到了一个黑匣子，没有其他东西，地图的整个形状就变成了一个黑匣子。

您可以在此处看到实时示例：

https：//codepen.io/mush-/mush-/mush------- a/pen/rwqayjx？editors = 0010

topojson

原文

I am trying to make a US map using d3.js.

I use the following code to draw my map:

const EDUCATION =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json';
const COUNTY =
  'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json';

const W = 1000
const H = 500
const M = { top: 30, right: 30, bottom: 30, left: 30 }
const P = { top: 30, right: 30, bottom: 30, left: 30 }

function draw(W, H, M, P, COUNTY, EDUCATION) {
  
  const geoJson = topojson.feature(COUNTY, COUNTY.objects.counties)
  
  const projection = d3.geoMercator().fitSize([W, H], geoJson)
 
  const path = d3.geoPath(projection)
  
  const svg = d3
  .select("#container")
  .append("svg")
  .attr("class", "svg-area")
  .attr("width", W)
  .attr("height", H)
  
  const map = svg
  .append('g')
  .selectAll("path")
  .data(geoJson.features)
  .enter()
  .append("path")
  .attr('class', 'counties')
  .attr('d', path)
}

Promise
.all([d3.json(COUNTY), d3.json(EDUCATION)])
.then(data => draw(W, H, M, P, data[0], data[1]))
.catch(err => console.log(err));

The map is too big and therefore, I decided to scale it down using the projection.fitSize() method. I followed this article to learn about it.

Without the const projection = d3.geoMercator().fitSize([W, H], geoJson) projection the map is successfully drawn. But with it, something weird happens: I see a black box and nothing else, the entire shape of the map just becomes a black box.

You can see the live example here:

https://codepen.io/mush-a/pen/RwQaYJx?editors=0010

The topojson data is given here

分享到QQ

分享到微博