如何訪問 GeoJson 數據中的文本元素？

Question

我正在使用 d3.js 和 vue js 構建一個 webapp。 目的是使用 GeoJson 數據創建平面圖。 我想在房間/走廊的 label 的平面圖中添加文本。 這甚至可能嗎？ 我試着做

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



      })
      

    }

Answer 1

您的錯誤是您試圖訪問一組功能的屬性，而不是單個功能的屬性。 要訪問這些，請嘗試使用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);
      })
      

    }