使用 D3.js 和 Geojson 的场地/室内地图

Question

我创建了 geojson 文件，其中包含购物中心 1 楼的所有功能。我得到了使用 d3.js 以不同颜色投影的场地地图，但只有一些部分不是完整的地图。下面是脚本代码和 geojson 文件的链接。另请注意，我尚未将此 geojson 转换为 topojson 并使用 Qgis 绘制地图并使用 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 映射工具真的会崩溃。

我尝试创建一个只返回输入值的“空”投影，但是在传递给投影函数之前，负数和大于 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 文件转换为地理单位。它们不必是特定地点的实际纬度和经度（您仍然可以将地图以您选择的参考点为中心），但比例尺必须以度为单位，而不是英尺或米或您使用的任何东西。

Answer 2

D3 的映射投影旨在将 3D 地球坐标转换为 2D 浏览器坐标，因此它们在转换本地坐标方面并不像您所拥有的那样出色。正如 Amelia 概述的那样，您输入的坐标超出了预期。

你最好做两件事之一；根据谷歌小组讨论中概述的 2 个线性比例创建几何流；或使用 d3 的路径生成器。

要在 d3 中创建 2D 路径生成器很简单，这样的事情会起作用：

var shops = d3.svg.line()
    .interpolate("linear")
    .x(function(d) {
        return xScale(d.x);
    })
    .y(function(d) {
        return yScale(d.y);
    }) 

这里真正的技巧是访问 json 对象的“正确”部分。如果您查看 geojson 结构，您会看到有一个几何部分和一个属性部分。您需要挖掘以拉出坐标，然后将它们传递给路面生成器。在这种情况下，它将是：

d.geometry.coordinates

这显然需要正确引用。

请注意，如果您有复杂的几何图形（例如多多边形），此处概述的方法将不起作用，您需要做更多的工作。如果这就是您所拥有的，您将想要创建一个自定义几何流。

现在把所有这些放在一起，这是一个你是 json的工作示例。