D3を使用してバブルチャートを作成しようとしていますが、データが正しく処理されない理由がわかりません。処理されたデータをPHPからインポートしbubble.node
、チャートの円(半径、x座標、y座標など)に関連するグラフィックデータを適用するために実行しようとしています。代わりに、現在エラーが発生しています。
Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"
コードは次のとおりです(これまでのところ、エラーのためここで停止しています):
$(document).ready(function() {
// pull data from php file
var topFrequency = '<?php echo json_encode($frequencyJSON)?>';
var diameter = 510;
// create new pack layout
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter]);
// select chart3 div and append svg canvas for graph
var canvas = d3.select(".chart3").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g");
jsonData = JSON.parse(jsonData);
// should return array of nodes associated with data
// computed position of nodes & graphical data for each node
var nodes = bubble.nodes(topFrequency);
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
// give nodes a class name for referencing
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
topFrequency
でこのように見えますconsole.log
:
{"name":"frequencyData",
"children":[
{
"author1":"TUYTTENS, FAM",
"frequency":7
},
{
"author1":"REVILLA, E",
"frequency":7
},
{
"author1":"ROPER, TJ",
"frequency":7
},
{
"author1":"MACDONALD, DW",
"frequency":6
},
{
"author1":"WOODROFFE, R",
"frequency":5
},
{
"author1":"CHEESEMAN, CL",
"frequency":4
},
{
"author1":"GALLAGHER, J",
"frequency":4
},
{
"author1":"KOWALCZYK, R",
"frequency":3
},
{
"author1":"HANCOX, M",
"frequency":3
},
{
"author1":"VIRGOS, E",
"frequency":3
}
]
}
undefined
x属性とy属性がノードの配列に作成されていないため、上記のエラーが発生していることがわかりますが、その理由はわかりません。おそらく私のデータは間違った形式ですか?
**編集**
JSON.parse(topFrequency)
正しい形式でデータを取得するために追加されました。今console.log(jsonData)
与える:
Object {name: "frequencyData", children: Array[10]}
children: Array[10]
0: Object
author1: "CARTES, JE"
depth: 1
frequency: 10
parent: Object
r: NaN
value: 0
x: NaN
y: NaN
1: Object
author1: "SASSEN, R"
depth: 1
frequency: 8
parent: Object
r: NaN
value: 0
x: NaN
y: NaN
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
length: 10
depth: 0
name: "frequencyData"
r: NaN
value: 0
x: NaN
y: NaN
これで正しい属性が返さNaN
れますが、値が返されます。私が電話する前にもこれを行っていますbubble.nodes
; これらの属性はbubble.nodes
!によって追加されたと思いました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加