중첩 된 선택을 시도 할 때 D3 데이터가 정의되지 않았습니다.

Question

D3에서 json 데이터로 작업하는 데 문제가 있습니다. 이 파일은 내가 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))). 이 문자열 목록이기 때문에 당신이 개체를 로그인 할 때 따라서, circles에 대한 .data()에 한 번에 하나씩 전달되는, 당신은 단지 즉, json_data의

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

을 열쇠를 얻을, 그들은이라는 재산이없는 accessibility이므로 오류가 발생했습니다.

내 생각 엔 당신이 단지에

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

을 전달합니다

.data(json_data.accessibility) 

와 그 라인을 교체하는 경우 코드가 할 것 json_data.accessibility의 각 항목에 대한 원을 추가하려고하는 것입니다 data. 이 코드는 내 컴퓨터에서 작동하며 페이지에 6 개의 원을 그립니다.

마지막으로주의해야 할 점은 변수 이름에주의해야한다는 것입니다. 데이터에 전달하는 함수에서 json_data을 해당 함수의 로컬 변수로 다시 정의합니다. 즉, 해당 함수의 실제 JSON 데이터에 액세스 할 수 없습니다.