3

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}
] }
4

1 に答える 1

2

あなたが抱えている問題はcircles、すでにバインドされているデータの関数を使用してデータをバインドしているという事実から来ていますseries:

var circles = series.selectAll("circle")

seriesにはすでに からバインドされたデータがあります.data(d3.keys(json_data))。したがって、一度に 1 つずつ.data()forに渡されるオブジェクトをログに記録すると、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。このコードは私のマシンで動作し、ページに 6 つの円を描画します。

最後に、変数名には注意が必要です。データに渡すjson_data関数では、その関数でローカル変数として再定義しています。つまり、その関数で実際の JSON データにアクセスできません。

于 2013-10-24T23:52:28.453 に答える