Question

我创建了geojson文件，其中包含购物中心一楼的所有功能。我使用不同颜色的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映射工具看起来真的会崩溃。

我尝试创建一个只返回输入值的“null”投影，但是在传递给投影函数之前，负数和大于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概述了你所在的坐标，这些坐标超出了预期的范围。

你最好做两件事之一;根据{{3}}讨论中概述的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);
    })

这里的真正诀窍是访问＆＃39;权利＆＃39;你的json对象的一部分。如果您查看geojson结构，您会看到有几何零件以及属性零件。您需要深入挖掘坐标，然后将它们传递给路面发生器。在这种情况下，它将是：

d.geometry.coordinates

显然需要正确引用。

请注意，如果您有复杂的几何图形（如多边形），此处概述的方法无法正常工作，您需要做更多的工作。如果这就是您想要创建自定义几何流的内容。

现在把你所有的this google groups放在一起json。

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

2 个答案: