尝试嵌套选择时未定义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

您遇到的问题来自于一个事实，即你正在使用已绑定到数据的功能将数据绑定到circlesseries：

var circles = series.selectAll("circle") 

series已经有数据绑定到它从.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数据。