我有一个包含多个路径的json文件
Json文件
{
"paths": {
"path1": {
"name": "PathName1",
"path": "m 411.42,469.19 -0.98 ... z",
},
"path2": {
"name": "PathName2",
"path": "m 396.03,243.46 1.48,0.11 0,0 -0.01,0.47 -0.95,1.45 ... z",
}
}
}
我想使用d3从这个Json文件创建一个svg,但是我不知道如何使用我的路径
var svg = d3.select('#map').append("svg")
.attr("id", "svg")
.attr("width", 500)
.attr("height", 500);
d3.json("urlToJsonFile", function(req, data) {
// how can I show my paths ?
}
如果您有多个路径,并且希望全部绘制,则可能需要将JSON数据解析为一个集合,以使用data()/ enter()/ exit()联接(或循环处理它们或使用其他一些优化方法)技术)。
要使用您提供的JSON结构中的数据,您可以设置路径对象,将每个“路径”对象绑定为“基准”,然后将路径数据传递至其“ d”属性。这将画出您的路径之一:
svg.append("path")
.attr("class", "path1")
.datum(data.paths.path1)
.attr("d", function(d) { return d.path});
尝试一下:JSFiddle
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句