d3.js - 使用 D3.js 和 Geojson 的 field /室内地图

Question

我创建了包含购物中心一楼所有功能的 geojson 文件。我得到了使用不同颜色的 d3.js 投影的 field map ，但只有一些部分不是完整的 map 。下面是脚本代码和 geojson 文件的链接。另请注意，我没有将此 geojson 转换为 topojson 并使用 Qgis 绘制 map 和 c#.net 将几何数据转换为 geojson 对象。任何人都可以检查我的 json 和我的 d3.js 代码吗？我需要使用任何其他预测吗？

https://www.dropbox.com/s/8pu2s0yamfkd89p/JSONfromDB_8Feb2014.json

 $(document).ready(function () {                       
      parseResultShopDetails();                     
 });

 function parseResultShopDetails() {

    var width = 600, height = 300;

    var svg = d3.select("#map").append("svg")
            .attr("width", width)
            .attr("height", height);

    var projection = d3.geo.mercator()
               .scale(30)
               .translate([width / 2, height / 2]);

    var path = d3.geo.path()
                        .projection(projection);            

      d3.json("http://localhost:1209/data/JSONfromDB_8Feb2014.json", function (error,       jsonData) {
        var color1 = d3.scale.category10();

        svg.selectAll("path")
        .data(jsonData.features)
                        .enter()
                        .append("path")
                        .attr("d", path)
                        .attr("text", function (d, i) { return "js"; })
                        .attr("fill", function (d, i) { return color1(i); });


    });           
}        

Answer 1

如果您尝试使用经度和纬度以外的坐标，d3 map 工具似乎真的会崩溃。

我尝试创建一个只返回输入值的“空”投影，但负数和大于 360 的数字在传递给投影函数之前仍被 d3 包裹。这避免了墨卡托投影的三角错误，并创造了有趣的艺术，但不是您希望的平面图:

var projection = d3.geo.projection(function(λ, φ) {
  return [ λ, φ ];
});

http://fiddle.jshell.net/rR2hG/1/

然而，一切并没有丢失。该示例中的第二张图像是通过将坐标数组作为 <polygon> 的点传递来创建的元素。我认为这更接近你想要的。因此，您需要做更多的工作才能从数据文件中获取点，但您绝对可以将它们可视化为坐标数组。

    svg2.selectAll("polygon")
        .data(jsonData.features)
        .enter()
        .append("polygon")
        .attr("points", function(d){ return d3.merge(d.geometry.coordinates);})
        .attr("fill", function (d, i) {
            return color1(i);
        });

唯一的其他建议是编写一个脚本将您的 geoJSON 文件转换为地理单位。它们不必是特定地点的实际纬度和经度(您仍然可以让 map 以您选择的引用点为中心)，但比例尺必须以度为单位，而不是英尺或米或您使用的任何东西。