如何在d3.js中弯曲Geo Path

问题描述

我正在尝试从geojson数据绘制一个楼层地图。现在，通过从geojson.io生成数据，它可以完美地工作。我想通过制作弯曲的走廊和可能的圆形房间（在将来）来扩大规模。我注意到在geojson数据中不可能有弧和圆，因此我在考虑使用d3.js路径，然后在该路径上应用曲线。我发现您不能在geoPath上使用curveLinear，curveStep，curveBasis。甚至可以弯曲geoPath？谢谢您的帮助

GeoJson数据

{
  "type": "FeatureCollection","features": [
    {
      "type": "Feature","properties": {},"geometry": {
        "type": "polygon","coordinates": [
          [
            [
              19.335937499999996,52.26815737376817
            ],[
              35.68359375,60.19615576604439
            ],[
              19.335937499999996,52.26815737376817
            ]
          ]
        ]
      }
    },{
      "type": "Feature","coordinates": [
          [
            [
              35.595703125,57.89149735271034
            ],[
              35.595703125,54.57206165565852
            ],[
              51.591796875,54.316523240258256
            ],[
              56.51367187499999,52.696361078274485
            ],[
              55.810546875,41.178653972331674
            ],[
              65.91796875,41.50857729743935
            ],[
              64.951171875,53.067626642387374
            ],[
              52.91015625,57.844750992891
            ],57.89149735271034
            ]
          ]
        ]
      }
    },"coordinates": [
          [
            [
              43.06640625,21.69826549685252
            ],[
              78.75,41.64007838467894
            ],[
              43.06640625,21.69826549685252
            ]
          ]
        ]
      }
    }
  ]
}

我的代码

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

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


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

      })

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）