Question

我试图使用d3映射鸟类分布。到目前为止，我已成功使用d3绘制和投影伊利诺伊州地图的路径。现在，我从eBird api请求数据，然后操纵它作为geojson读取，然后创建一系列d3圆圈以在地图上绘制它们。圈子正在创建并附加到DOM，但我已经定义的投影似乎将它们绘制得太过分和向右。

还在学习d3的基础知识，所以请耐心等待。我的代码可以在下面的要点中找到。

https://gist.github.com/cqlanus/599a6b02e5168a051fef948ba541e296

或者，如果我尝试将数据绘制为路径，则会创建路径元素，但它们不会出现在DOM上：

const sightings = svg.append('g').attr('class', 'sightings')

    sightings.selectAll('path')
      .data(sightingGeoArr)
      .enter().append('path')
      .attr('fill', '#000')
      .attr('d', geoPath)

Answer 1

Geojson使用x，y格式作为坐标。你的geojson是y，x：

    "coordinates": [result.lat, result.lng]

尝试：

    "coordinates": [result.lng, result.lat]

我没有你的状态geojson用于边界，但我估计下面的片段有一个合适的投影，显示你的脚本工作（我喜欢Ebird数据，但我还没有将它转换为geojson用于d3之前，我将不得不试一试。）

const height = 500, width = 500

/* Create a color function */

/* Define a projection function */
const albersProj = d3.geoAlbers()
  .center([0,40.08])
  .rotate([88.0,0])
  .translate([width/2,height/2])
  .scale(4000)

/* Define a path function */
const geoPath = d3.geoPath()
  .projection(albersProj)
  .pointRadius(5)

/* Attach svg to page */
var svg = d3.select( "body" )
  .append( "svg" )
  .attr( "width", width )
  .attr( "height", height );

/* Attach group to svg */
var g = svg.append( "g" );


/* Get iNaturalist data */
d3.json('http://ebird.org/ws1.1/data/obs/region_spp/recent?rtype=subnational1&r=US-IL&sci=Setophaga%20coronata&back=15&maxResults=500&locale=en_US&fmt=json&includeProvisional=true')
  .get((err, data) => {
    console.log(data.length)

    /* Manipulate it to be read as geojson */
    const sightingGeoArr = data.map(result => ({
      "geometry": {
        "type": "Point",
        "coordinates": [result.lng, result.lat]
      }
    }))

    const sightings = svg.append('g').attr('class', 'sightings')

    sightings.selectAll('circle')
      .data(sightingGeoArr)
      .enter().append('circle')
      .attr('fill', '#000')
      .attr('cx', d => albersProj(d.geometry.coordinates)[0])
      .attr('cy', d => albersProj(d.geometry.coordinates)[1])
      .attr('r', 2)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

使用d3通过投影

1 个答案: