D3 - 自定义地图 json

Question

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

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。 Here you can find the corresponding part of the API documentation. Using this tutorial about svg paths I've created a 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);})

请参阅上面的 fiddle 链接以获取完整代码。

D3 - 自定义地图 json

D3 - Map with custom json

javascript

json

polygon

d3.js