D3 - 使用自定义 json 映射

Question

我想使用 json 绘制自定义地图，我将从网络服务中获取该地图，因此不在文件中。

json 可能看起来像这样

{
    "areas" : [
        {
            "name" : "A",
            "borders" : [[4,50], [4.5,51],...],
            "otherProperty" : "red"
        },
        {
            "name" : "B",
            "borders" : [[3,48] , [3.5,49],...],
            "otherProperty" : "yellow"
        }
    ]
}

边界将绘制一个多边形，作为该区域的边界。

是否可以使用这样的 Json 来绘制地图？ 如果需要，我可以更改 json

如何使用此 json 而不是文件？

 d3.json("myFile.json", function(error, data) {...}

编辑

我可以直接使用

g.selectAll('path')
.data(data.areas)

但没有显示任何内容也没有错误

编辑 2

我对点使用 ConicConformal 坐标

[181096,163474],[180722,164173],[180280,164925],

编辑 3

这是一个不起作用的JSFiddle

Answer 1

我不确定我是否明白你的问题。

json 是来自文件还是来自网络服务器应该无关紧要，您可以在 d3.json 调用中提供路径或 uri。 或者当您在编辑中发布时，您可以直接使用该变量。

您提供的结构可以毫无问题地使用。

我假设您使用的是 D3 v3。 您可以在此处找到 API 文档的相应部分。 使用有关 svg 路径的本教程，我创建了一个 jsfiddle ，它显示具有给定 json 结构的多边形（我已更改数字以获得更明显的结果）。

以下函数负责在生成将用作多边形边界的路径时获取您提供的数据的正确部分。

var lineFunction = d3.svg.line()
                     .x(function(d) { return d[0]; })
                     .y(function(d) { return d[1]; })
                     .interpolate("linear");

这就是您将其传递给行生成器的方式：

.attr("d",function(d) {return lineFunction(d.borders);})

有关完整代码，请参阅上面链接的小提琴。