如何访问GeoJson数据中的文本元素？

问题描述

我正在使用d3.js和vue js构建一个Webapp。目的是使用GeoJson数据创建平面图。我想在平面布置图中添加文本以标记房间/走廊。这有可能吗？我尝试做

console.log(data.features.properties.name)

先记录数据，但这不起作用。我知道了

TypeError: Cannot read property 'name' of undefined

错误。

我已经包含了GeoJson数据和我的代码。谢谢您的帮助，我对这些东西还很陌生，所以有什么帮助。

{
    "type": "FeatureCollection","features": [
      {
        "type": "Feature","properties": {},"geometry": {
          "type": "polygon","coordinates": [
            [
              [
                -131.484375,-60.93043220292333
              ],[
                -131.48712158203125,-61.938950426660604
              ],[
                -129.375,[
                -129.37225341796875,[
                -130.07537841796875,-60.9290976898192
              ],[
                -130.4296875,-60.759159502269895
              ],[
                -131.1328125,[
                -131.484375,-60.93043220292333
              ]
            ]
          ]
        }
      },{
        "type": "Feature","properties": {
          "stroke": "#555555","stroke-width": 2,"stroke-opacity": 1,"fill": "#555555","fill-opacity": 0.5,"name": "Kitchen"
        },"coordinates": [
            [
              [
                -131.1328125,-60.92976495336046
              ],-61.270232790000605
              ],[
                -130.07675170898438,-61.27089289540995
              ],[
                -130.42831420898438,-60.759159502269895
              ]
            ]
          ]
        }
      },"name": "Living Room"
        },"coordinates": [
            [
              [
                -131.4898681640625,-61.94024242472969
              ],[
                -130.078125,-61.60639637138627
              ],[
                -131.4898681640625,-61.94024242472969
              ]
            ]
          ]
        }
      },"name": "Front Door"
        },"coordinates": [
            [
              [
                -129.40486907958984,-61.92538114682588
              ],[
                -129.34547424316406,-61.78724662364391
              ],[
                -129.40486907958984,-61.92538114682588
              ]
            ]
          ]
        }
      },"fill-opacity": 0.5
        },"coordinates": [
            [
              [
                -130.89866638183594,-61.2847519044403
              ],[
                -130.66280364990234,-61.25521164335227
              ],[
                -130.89866638183594,-61.2847519044403
              ]
            ]
          ]
        }
      },"coordinates": [
            [
              [
                -130.10765075683594,-61.84286677003186
              ],[
                -130.04825592041016,-61.74501840587376
              ],[
                -130.10765075683594,-61.84286677003186
              ]
            ]
          ]
        }
      },"coordinates": [
            [
              [
                -131.13418579101562,-61.6351166115343
              ],-61.576995825326016
              ],[
                -131.13418579101562,-61.6351166115343
              ]
            ]
          ]
        }
      },"name": "Bathroom"
        },"coordinates": [
            [
              [
                -130.07675170898438,-61.27155298694534
              ],[
                -129.3695068359375,-61.27155298694534
              ]
            ]
          ]
        }
      },"coordinates": [
            [
              [
                -129.90509033203125,-61.284092090340835
              ],[
                -129.54254150390625,-61.253725645140406
              ],[
                -129.90509033203125,-61.284092090340835
              ]
            ]
          ]
        }
      }
    ]
  }

createFloormap(){

      d3.json("../static/data.json").then(function(data){
      let self = this
        var svg = d3.select("svg")
        var width = +svg.attr("width")
        var height = +svg.attr("height")

        svg.attr("transform","translate(" + width/2 + ",0)")

        var projection = d3.geoIdentity().fitSize([width,height],data)
        var path = d3.geoPath(projection) 

        console.log(data.features.properties.name)

        svg.selectAll("path")
          .data(data.features)
          .enter()
          .append("path")
          //.attr("id",data.features.properties)
          .attr("d",path)
          .attr("fill","white")
          .attr("stroke","black")
          .attr("stroke-width",1.5)



      })
      

    }

解决方法

您的错误是您尝试访问 set of 功能的属性，而不是单个功能的属性。要访问这些内容，请尝试使用console.log(data.features.map((f) => f.properties.name))。它将记录一系列功能。

要将名称放置在SVG上，请执行以下操作（我无法对其进行测试）

createFloormap(){

      d3.json("../static/data.json").then(function(data){
        let self = this
        var svg = d3.select("svg")
        var width = +svg.attr("width")
        var height = +svg.attr("height")

        svg.attr("transform","translate(" + width/2 + ",0)")

        var projection = d3.geoIdentity().fitSize([width,height],data)
        var path = d3.geoPath(projection) 

        console.log(data.features.map((f) => f.properties.name));

        var paths = svg.selectAll("path")
          .data(data.features);

        paths
          .enter()
          .append("path")
          // do this to merge the new `.enter()`-ed collection
          // with the pre-existing set of `paths` if you use d3
          // version 4+. See the docs and `https://medium.com/@bryony_17728/d3-js-merge-in-depth-a3069749a84f`
          // for details.
          .merge(path)
          .attr("id",(d) => d.properties.name)
          .attr("d",path)
          .attr("fill","white")
          .attr("stroke","black")
          .attr("stroke-width",1.5);

       // Now for the new part
       var labels = svg.selectAll(".label")
         .data(data.features);

       labels.enter()
         .append("text")
         .attr("class","label)
         .merge(labels)
         .text((d) => d.properties.name)
         // This should return the centroid of the shape,see `https://github.com/d3/d3-geo#path_centroid`
         .attr('x',path.centroid.x)
         .attr('y',path.centroid.y);
      })
      

    }