D3 - 使用自定义json映射

时间:2016-09-09 07:53:26

标签: javascript json d3.js polygon

我想使用json绘制自定义地图,我将从网络服务中获取,而不是在文件中。

json可能看起来像这样

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

边框将绘制一个多边形,这是该区域的边界。

是否可以像这样使用Json来绘制地图?如果需要,我可以更改json

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

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

修改

我可以直接使用

mydf = pd.DataFrame({'classLabel':[0,0,0,1,1,0,0,0],
                   'categorical':[7,8,9,5,7,5,6,4],
                   'numeric1':[7,8,9,5,7,5,6,4],
                   'numeric2':[7,8,9,5,7,5,6,"N.A"]})
columnsNumber = ['numeric1']
XoneColumn = X[columnsNumber]

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

编辑2

我正在使用ConicConformal坐标

  

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

编辑3

这是一个无效的JSFiddle

1 个答案:

答案 0 :(得分:2)

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

如果json来自文件或来自网络服务器,那么你可以在d3.json调用中给出路径或uri。或者,当您在编辑中发布时,可以直接使用变量。

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

我以为你在使用D3 v3。 Here您可以找到API文档的相应部分。使用this tutorial关于svg路径,我创建了a jsfiddle,它显示了具有给定json结构的多边形(我已经更改了数字以获得更明显的结果)。

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

contato_path    POST    /contato(.:format)  pages#contato

这就是你将它传递给线生成器的方法:

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

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