使用D3.js和Geojson的场地/室内地图
我创建了geojson文件，其中包含了购物中心一楼的所有功能。我得到的场地地图使用d3.js不同的颜色，但只有一些部分，而不是完整的地图。下面是到geojson文件的脚本代码和链接。另外，请注意，我没有将这个geojson转换成topojson，并使用Qgis绘制地图，并使用c#.net将几何数据转换为geojson对象。有人能检查一下我的json和d3.js代码吗？我还需要用其他投影吗？
$(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); });
});
} 回答 2
Stack Overflow用户
发布于 2014-03-01 17:08:37
如果您尝试使用经度和纬度以外的坐标，那么d3映射工具看起来真的会分崩离析。
我尝试创建一个只返回输入值的"null“投影，但是在传递到投影函数之前，大于360的负数和数字仍然被d3包装。这避免了Mercator投影中的trig错误，它创造了有趣的艺术，但不是你所期望的平面图：
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文件转换为地理单元。它们不一定是某个地方的实际纬度和经度(你仍然可以将地图以你选择的参照点为中心)，但比例尺必须是度，而不是英尺、米或你正在使用的任何东西。
Stack Overflow用户
发布于 2014-03-01 23:57:41
D3的地图投影是为了将三维地球坐标转换成2D浏览器坐标，所以它们在转换本地坐标方面并不像你所拥有的那样出色。正如阿米莉亚所描述的那样，你把坐标放置在预期之外的坐标中。
您最好做两件事之一:根据这个google组讨论中概述的两个线性尺度创建一个几何流；或者使用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。
https://stackoverflow.com/questions/22111036
复制相似问题
腾讯云开发者
