javascript - D3 - 带有自定义 json 的 map

Question

我想使用从网络服务获取的 json 来绘制自定义 map ，因此不在文件中。

json 可能看起来像这样

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

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

是否可以使用这样的Json来绘制 map ？如果需要我可以更改 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你可以在API文档中找到相应的部分。使用this tutorial关于我创建的 svg 路径 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 以获取完整的代码。