d3 создать SVG из путей JSON

Question

у меня есть 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", 
     } 
    } 
} 

И я хотел бы создать SVG из этого файла Json с помощью d3, но я не знаю, как использовать мои пути

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 ? 
} 

Answer 1

Если у вас есть несколько путей, и хотите сделать их все, вы можете разобрать данные JSON в коллекцию в use data()/enter()/exit() объединяет (или обрабатывает их в цикле или использует какой-либо другой метод оптимизации).

Чтобы использовать данные в структуре JSON, которые вы предоставили, вы можете перемещать объекты, связывать каждый объект «путь» как «датум» и передавать данные пути в свой атрибут «d». Это будет сделать один из ваших путей:

svg.append("path") 
    .attr("class", "path1") 
    .datum(data.paths.path1) 
    .attr("d", function(d) { return d.path}); 

Попробуйте: JSFiddle