Question

“”我正在使用d3.js在地图上某些坐标之间绘制一条橙色连接线的世界地图
像这样 https://www.d3-graph-gallery.com/graph/connectionmap_basic.html

current map picture here

显示地图没有问题，但是连接Otawa和巴西利亚的橙色线没有出现在地图上

” 错误：属性d：期望的数字为“…7.6843192758206，NaNL-148.3185307…”。 “

在d3.v4.js上：1206

我不知道为什么会发生错误，因为我认为我输入了正确的坐标。

我已经搜索了此错误消息，但是由于大多数问题与d3图形问题有关，而不是与地图有关，因此我无法解决问题。

我尝试使用多种输入来输入坐标，但是它们都不起作用。

（这是jsp文件中的脚本，我正在Spring Framework中使用此jsp）

const width = 960,
            height = 500,
            projection = d3.geoMercator()
                .center([0, 5])
                .scale(200)
                .rotate([-180, 0]),
            svg = d3.select('#map').append('svg')
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 960 500"),
            path = d3.geoPath()
                .projection(projection),
            g = svg.append('g'),
            cities = [{ 'code': 'OTT', 'city': 'OTTAWA', 'country': 'CANADA', 'lat': '23.10', 'lon': '120.34' }, { 'code': 'BSB', 'city': 'BRASILIA', 'country': 'BRAZIL', 'lat': '-32.85', 'lon': '133.30' }, { 'code': 'DEL', 'city': 'DELHI', 'country': 'INDIA', 'lat': '4.71', 'lon': '-127.57' }, { 'code': 'CMX', 'city': 'CIDADE DO MEXICO', 'country': 'MEXICO', 'lat': '0.42', 'lon': '93.19' }, { 'code': 'SID', 'city': 'SIDNEY', 'country': 'AUSTRALIA', 'lat': '-48.38', 'lon': '-71.71' }, { 'code': 'TOK', 'city': 'TOQUIO', 'country': 'JAPAO', 'lat': '17.34', 'lon': '-81.73' }, { 'code': 'CCA', 'city': 'CIDADE DO CABO', 'country': 'AFRICA DO SUL', 'lat': '-43.20', 'lon': '-171.97' }, { 'code': 'CMP', 'city': 'CAMPO GRANDE', 'country': 'BRASIL', 'lat': '-36.15', 'lon': '130.72' }, { 'code': 'PAR', 'city': 'PARIS', 'country': 'FRANCA', 'lat': '22.19', 'lon': '174.27' }, { 'code': 'NOY', 'city': 'NOVA YORK', 'country': 'USA', 'lat': '11.23', 'lon': '112.96' }]

        g.append('image')
            .attr('xlink:href', 'https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg')
            .append('path')
            .attr('d', path)

        // Carregar cidades | load city
        //d3.json('cities.json', (error, data) => {
        const circles = g.selectAll('circle')
            .data(cities)
            .enter()
            .append('a')
            .attr('xlink:href', d => 'https://www.google.com/search?q=${d.city}'
            )
            .append('circle')
            .attr('cx', d => projection([d.lon, d.lat])[0])
            .attr('cy', d => projection([d.lon, d.lat])[1])
            .attr('r', 5)
            .style('fill', 'red'),
            drag_handler = d3.drag()
                .on('start', drag_start)
                .on('drag', drag_drag)

        // Change these data to see ho the great circle reacts
        var link = {type: "LineString", coordinates: [[Number(cities[0]["lat"]), Number(cities[0]["lon"])], [Number(cities[1]["lat"]), Number(cities[1]["lon"])]]}

        // I tried many other coordinates input like
        // var link = {type: "LineString", coordinates: [[23.10, 120.34], [-32.85, 133.30]]}
        // but all of them didn't work.




        // Add the path
    svg.append("path")
      .attr("d", path(link))
      .style("fill", "none")
      .style("stroke", "orange")
      .style("stroke-width", 7)

        function drag_start() {
            start_x = +d3.event.x
            start_y = +d3.event.y
        }

        function drag_drag(d) {
            //Get the current scale of the circle 
            //case where we haven't scaled the circle yet
            // get lon x lat
            console.log('lon x lat', projection.invert([d3.event.x, d3.event.y]))

            d3.select(this)
              .attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y)
        }

        drag_handler(circles)

        // zoom and pan
        const zoom = d3.zoom()
            .on('zoom', () => {
                g.style('stroke-width', `${1.5 / d3.event.transform.k}px`)
                g.attr('transform', d3.event.transform) // updated for d3 v4
            })

        svg.call(zoom)

我希望出现一条连接加拿大奥塔瓦（Otawa）和巴西利亚（Brasil）的橙色线，但该线不会出现错误

” 错误：属性d：期望的数字为“…7.6843192758206，NaNL-148.3185307…”。 “

在d3.v4.js上：1206

此错误发生在行

// Add the path
   svg.append("path")
       .attr("d", path(link))  // here the error occurs
       .style("fill", "none")
       .style("stroke", "orange")
       .style("stroke-width", 7)

在添加路径时。

由于path（link）包含NaNL，所以变量链接可能存在问题，但是我不知道为什么，因为我认为我正确地将坐标输入如工作代码放在 https://www.d3-graph-gallery.com/graph/connectionmap_basic.html

如何在d3.js映射中显示连接线（'错误：<path>属性d：预期数量）

0 个答案: