d3从JSON路径创建svg

佐尔克斯

我有一个包含多个路径的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3从数组创建SVG路径

来自分类Dev

d3从数组创建SVG路径

来自分类Dev

D3 svg 路径重叠

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

如何在SVG中为D3画笔创建路径

来自分类Dev

如何在d3和SVG中创建阴影路径?

来自分类Dev

如何获得SVG路径形状以缩放D3?

来自分类Dev

d3可拖动svg路径线段

来自分类Dev

在d3中访问SVG路径长度

来自分类Dev

更新 svg 和 d3 中的路径样式

来自分类Dev

为D3和SVG元素创建动画

来自分类Dev

D3 - 基于 JSON 数据附加 SVG

来自分类Dev

SVG中的路径位于D3图表中圆圈的前面,尽管有附加顺序

来自分类Dev

将边框添加到SVG路径d3 JavaScript

来自分类Dev

如何选择具有特定ID的d3 svg路径

来自分类Dev

缩放到使用D3外部加载SVG边界路径箱

来自分类Dev

d3 JavaScript,获取svg路径中两点之间的距离

来自分类Dev

检查路径是否在带有d3的svg中具有标题

来自分类Dev

将多条路径合并到一个D3(SVG)中

来自分类Dev

D3:无法将简单路径追加到svg容器

来自分类Dev

svg路径中的d3 js三角形

来自分类Dev

带有路径和 SVG 的 d3 动画折线图

来自分类Dev

使用ScalaJS从JSON创建D3树

来自分类Dev

使用Python创建D3嵌套JSON数据

来自分类Dev

使用ScalaJS从JSON创建D3树

来自分类Dev

D3 - 从 JSON 创建功能集

来自分类Dev

d3 雷达图——radialLine 创建路径但没有坐标

来自分类Dev

D3 + Google地图+多点路径