Не удалось прочитать значение d пути из файла d3 json?

Question

Я читаю Arc информацию из json-файла и визуализирую их с помощью d3. Фактически я использую d3.layout для группировки данных. поэтому я должен прочитать этот файл, где tag является нашим тегом svg, который равен path, а value - значение пути пути, проблема d будет изменена после чтения и возврата 0. Как я могу прочитать value? Должен ли я организовать свой json-файл по-другому? Вот мой код:

Файл JSON:

 {"id": "svgContent","children": [ 
     {"id": "circle1","tag": "path", 
     "value": "M0,160A160,160 0 1,1 0,-160A160,160 0 1,1 0,160M0,100A100,100 0 1,0 0,-100A100,100 0 1,0 0,100Z", 
    "children": [ 
     { "id": "point", "cx": "-67.59530401363443", "cy": "-93.03695435311894" }, 
     { "id": "point", "cx": "-109.37149937394265", "cy": "35.53695435311897" }, 
     { "id": "point", "cx": "1.4083438190194563e-14", "cy": "115" } 
    ] 

}, 
     {"id": "circle2","tag": "path","value": "M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z", 
    "children": [     
     { "id": "point", "cx": "-126.37382924288177", "cy": "-173.93865379061367" }, 
     { "id": "point", "cx": "-204.477151003458", "cy": "66.43865379061373" }, 
     { "id": "point", "cx": "2.6329906181668095e-14", "cy": "215" } 

    ] 

} 

]} 

Это мой исходный код:

var w = 1200, h = 780; 
    var svgContainer = d3.select("#body").append("svg") 
      .attr("width", w).attr("height", h).attr("id", "svgContent"); 
    var pack = d3.layout.partition(); 
    d3.json("/data.json", function(error, root) { 

    if (error) return console.error(error); 
    var nodes = pack.nodes(root); 
    svgContainer.selectAll("pack").data(nodes).enter().append("svg") 
    .attr("id", function (d) { return d.id; }).append("path") 
    .attr("d", function (d) { 

    console.log(d.value); 

    return d.value; }) 
    .attr("transform", "translate(600,0)"); 

    }); 

Когда я проверил консоль я ожидал "M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z" но вернуть 0, Как я могу справиться?

Answer 1

Прежде всего, я не совсем уверен, что ваш d3.select("#body") должен быть d3.select("body")? Или у вас есть элемент с идентификатором body?

Проблема с переуступкой value к 0 заключается в том, что поле d3.layout.partition() использует поле значений. Вы можете переименовать поле значения к чему-то другому, как path и установить его с

.attr("d", function(d){ 
    return d.path; 
}) 

Еще одна проблема с вашим кодом является, что вы добавляете несколько элементов SVG. Если вы действительно просто хотите читать пути круг и отображать их, то этот код делает работу:

var w = 1200, 
    h = 780; 
var svgContainer = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .attr("id", "svgContent"); 

d3.json("/data.json", function(error, root) { 

    if (error) return console.error(error); 
    svgContainer.selectAll("path") 
     .data(root.children) 
     .enter() 
    .append("path") 
     .attr("id", function (d) { return d.id; }) 
     .attr("d", function(d) { return d.value}) 
     .attr("transform", "translate(260,260)"); 
}); 

Нет необходимости расположения разделов. Просто создайте элементы пути и добавьте путь из json. Если вы хотите показать круги, было бы лучше разместить их вне палитр в вашем json, потому что вы не можете добавить круги SVG внутри элементов пути.