javascript - D3 - 使用自定义 json 映射

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 。