我是d3的新手,在将点添加到SVG地图时遇到了一些麻烦。我正在加载SVG地图,然后尝试从我的数据中添加坐标,数据是这样格式化的对象数组:
{schoolName: "Harvard University", gpa: 4, state: "MA", city: "Cambridge", longitude: -71.10973349999999, latitude: 42.3736158}
以下代码的结果是,我在SVG标记下附加了一组圆,但是地图上没有出现任何圆,并且收到了看起来像语法错误的代码,我在代码中没有看到。
Misaligned points to coordinates on map
我在这里做错了什么?
var coords = require('./data/coordinates')
document.addEventListener("DOMContentLoaded", () => {
// loads svg map
d3.xml('src/data/usa2.svg', function(data){
document.body.append(data.documentElement)
})
// adjusts data to include coordinates for each city
cities = cities.default
let schoolData = []
d3.json("src/data/schoolInfo.json", function(schools){
schools.map(el => {
let currentCity = cities.filter(function(cities){return cities.city === el.city})
el["hs-gpa-avg"] !== null && currentCity.length > 0 ? schoolData.push({"schoolName": el["displayName"], "gpa": el["hs-gpa-avg"], "state": el["state"], "city": el["city"], "longitude": currentCity[0]["longitude"], "latitude": currentCity[0]["latitude"]}) : ''
})
var width = 1200,
height = 720;
var albersProjection = d3.geoAlbers()
.scale(1000)
.rotate([70, 0])
.center([-15, 35])
.translate([width/2, height/2]);
var svg = d3.select('svg')
svg.selectAll("circle")
.data(schoolData).enter()
.append("circle")
.attr("transform", function(d) {
let coords = albersProjection([ d.longitude, d.latitude ]);
debugger
return `translate(${coords[0]}, ${coords[1]})`
})
.attr("r", "8px")
.attr("fill", "red")
})
})
SVG变换属性期望数字,无单位的纯数字。但是,如果使用CSS,则可以指定单位(style="transform: ..."
,而不是指定transform属性:transform = "..."
)。
下面的代码片段将设置单位与CSS样式属性进行了比较,直接设置了不带单位的transform属性,直接设置了带单位的transform属性。它应该在最后一个矩形上引起相同的错误(由于该错误未正确放置,它应该在蓝色矩形下方):
<svg>
<rect style="transform:translate(200px,0px)" width="20" height="20" fill="steelblue"></rect>
<rect transform="translate(100,0)" width="20" height="20" fill="crimson"></rect>
<rect transform="translate(200px,50px)" width="20" height="20" fill="orange"></rect>
</svg>
我的错误,在最后一个矩形上:“ Error: <rect> attribute transform: Expected ')', "translate(200px,50px)".
”
这与您相同,解决方案是仅从转换值中删除px
。 您还可以通过使用.style()
而不是.attr()
来指定CSS属性。
关于您的下一个问题:为什么圆圈still放置不正确,但是现在您没有错误了,这是另一个问题。不幸的是,这很普遍,为此,我指的是:
此问题使用墨卡托投影而不是Albers,但是问题是相同的:您有两个不同的投影(在您的情况下,它们都是Albers。]
这个问题也非常相似。这两个问题都使用相同的基本数据集(并且可能与您使用的数据集相同)。最终,您的US json会被预先投影,而纬度经度数据不会被投影-您需要确保两者最终都使用相同的投影类型和相同的投影参数。后一个问题的答案包括指向未投影的美国json的链接,最简单的解决方案可能是使用此json并以相同的投影方式投影您的点和json。
使用所有预投影的几何或所有未投影的几何总是容易的
并且通常可以帮助处理预投影的几何: