向d3 SVG地图添加点

问题描述 投票:1回答:1

我是d3的新手,在将点添加到SVG地图时遇到了一些麻烦。我正在加载SVG地图,然后尝试从我的数据中添加坐标,数据是这样格式化的对象数组:

{schoolName: "Harvard University", gpa: 4, state: "MA", city: "Cambridge", longitude: -71.10973349999999, latitude: 42.3736158}

以下代码的结果是,我在SVG标记下附加了一组圆,但是地图上没有出现任何圆,并且收到了看起来像语法错误的代码,我在代码中没有看到。

Syntax d3 translate error

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")   
    })

})
javascript d3.js svg
1个回答
0
投票

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。

使用所有预投影的几何或所有未投影的几何总是容易的

并且通常可以帮助处理预投影的几何:

© www.soinside.com 2019 - 2024. All rights reserved.