Данные D3 не определены при попытке вложенного выбора

Question

У меня возникли проблемы с работой с данными json в D3. Файл читается правильно, судя по тому, что он появляется, когда я console.log, и, кажется, отформатирован правильно, основываясь на том, как все найденные мной примеры. Но, когда я пытаюсь сделать вложенный выбор, используя .data(function(json_data){return json_data.accessibility;}), я получаю: «не могу прочитать длину свойства« неопределенного ».

Моя функция:

//load scenario json data 
d3.json("./SupportTool/scenario1result.json", function(error, json_data){ 
if(error) {return console.warn(error)}; 
console.log(json_data); //works 

// add main SVG block 
var svg = d3.select(d3id) 
    .append('svg') 
    .attr('width', 300) 
    .attr('height', 75) 
    .attr('id', 'svgblock'); 

// add an SVG group element for each scenario 
var series = svg.selectAll('g.series') 
    .data(d3.keys(json_data)) 
    .enter() 
    .append('g') 
    .attr('class', 'series'); 

var circles = series.selectAll("circle") 
    .data(function(json_data){return json_data.accessibility;}) 
    .enter() 
    .append("circle"); 
var circleAttributes = circles 
    .attr("cx", 20) 
    .attr("cy", 20) 
    .attr("r", 20) 
    .style("color","blue");  }); 

Мои данные JSON:

{ 
"meta":[{"sc":"1"},{"stratid":"1"}], 

"accessibility":[ 
    {"pop400":"77"},{"pop800":"86"},{"jobs800":"78"},{"pop400tr":"41"},{"pop800tr":"69"},{"jobs800tr":"80"} 
], 

"housing":[ 
    {"newcom":"0"},{"redev":"100"}, 
    {"apt5":"6"},{"apt4":"65"},{"twn":"14"},{"sglf":"15"}, 

    {"urb":"0"},{"urbhec":"0"} 

], 

"transport":[ 

    {"walk":"55"},{"transit":"18"},{"auto":"27"}, 
    {"vkt":"11000"}, 

    {"kmtr":"502"},{"form":"grid"}, 
    {"lanekm":"3250"}, 

    {"ghgtr":"67"},{"ghgres":"75"} 
], 

"costs":[ 
    {"roadcapbils":null,"roadcap":null}, 
    {"transitcapbils":null,"transitcap":null}, 
    {"watercapbils":null,"watercap":null}, 
    {"firecapbils":null,"firecap":null}, 
    {"reccapbils":null,"reccap":null}, 
    {"educapbils":null,"educap":null} 
], 

"opcosts":[ 
    {"roadopbils":null,"roadop":null}, 
    {"transitoppbils":null,"transitop":null}, 
    {"wateropbils":null,"waterop":null}, 
    {"fireopbils":null,"fireop":null}, 
    {"parksopbils":null,"parksop":null} 
] }  

Answer 1

Проблема у Вас есть исходит из того, что вы привязки данных к circles с использованием функции данных уже связанных с series:

var circles = series.selectAll("circle") 

Ууже есть данные, привязанные к нему от .data(d3.keys(json_data)). Таким образом, при входе в систему объектов, передаваемых по одному на .data() для circles, вы просто получите ключи от json_data, т.е.

["meta", "accessibility", "housing", "transport", "costs", "opcosts"] 

Поскольку это список строк, они не имеют свойство accessibility, следовательно, ваша ошибка.

Я предполагаю, что вы пытаетесь добавить круги для каждого элемента в json_data.accessibility, что ваш код будет делать, если вы просто заменить эту строку с

.data(json_data.accessibility) 

, который пройдет

[{"pop400":"77"},{"pop800":"86"},{"jobs800":"78"},{"pop400tr":"41"},{"pop800tr":"69"},{"jobs800tr":"80"}] 

в data. Этот код работает на моей машине и рисует шесть кругов на странице.

Наконец, вы должны быть осторожны с именами переменных. В функции, которую вы передаете данным, вы переопределяете json_data в качестве локальной переменной в этой функции, что означает, что вы не можете получить доступ к фактическим данным JSON в этой функции.