resasとd3jsを利用したhtmlを開発しています。

前提・実現したいこと

表示される市の名前を表示例のように回転させ表示したいです

resasとd3jsを利用したhtmlを開発しています。
市の名前を33行目のように配列に入れたいです。
27行目で配列に入れようとしています。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>ワードクラウド</title>
6	<script src="http://d3js.org/d3.v3.min.js"></script>
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8	<script src="d3.layout.cloud.js"></script>
9	<script>
10var width, height;
11var arr;
12$(function(){
13	width = 1000;
14	height = 600;
15	rotate = 90;
16	var colorScale = d3.scale.category20();
17
18
19	$.ajax({
20		url: "https://opendata.resas-portal.go.jp/api/v1/cities?prefCode=14",
21		type: "GET",
22		headers: {'X-API-KEY': "apikey"},
23		async: "false",
24		success: function(j) {
25			$.each(j.result, function(i, v){
26				$("#resas_data").append( v.cityName + "<br />");
27				//arr.push([{text:"resas_data",size:35},]);
28			});
29		}
30	});
31
32
33	var w = [{text:"表示例", size:35},];
34
35
36	d3.layout.cloud().size([width, height])
37		.words(w.map(function(d){ return {text: d.text, size: d.size}; }))
38		.rotate(function() { return (Math.floor(Math.random() * rotate*2) - rotate); })
39		.fontSize(function(d) { return d.size; })
40		.on("end", draw)
41		.start();
42	
43	function draw(words) {
44		d3.select("body").append("svg")
45			.attr("width", width)
46			.attr("height", height)
47			.append("g")
48			.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
49			.selectAll("text")
50			.data(words)
51			.enter().append("text")
52			.style({"font-size": function(d) { return d.size + "px"; }, "fill": function(d, i) { return colorScale(i); }})
53			.attr("text-anchor", "middle")
54			.attr("transform", function(d) {
55				return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
56			})
57			.text(function(d) { return d.text; });
58	}
59
60});
61	</script>
62</head>
63<body>
64	<h1>ワードクラウドのサンプル</h1>
65<div id="resas_data"></div>
66	
67</body>
68</html>
69

よろしくお願いします

shinji709

2019/12/05 07:50

ソースコードは「コードの挿入」機能を使用して貼り付けるよう修正していただけませんか？インデントも無くなってて見にくくて。

行動規範の内容に同意します

回答1件

まず、

JavaScript
1var arr;
2arr.push([{text:"resas_data",size:35},]);
3//=> エラー例: Uncaught TypeError: Cannot read property 'push' of undefined

ではarrがundefinedなのでエラーが出ます。配列のpushメソッドを使うならばarrは空の配列で初期化してください。

JavaScript
1var arr = []; //空の配列で初期化
2arr.push([{text:"resas_data",size:35},]);
3
4console.log(JSON.stringify(arr));
5//=> [[{"text":"resas_data","size":35}]]

次に、var w = [{text:"表示例", size:35},];と同じにしたいということなので、[]が一段よけいです。よって、

JavaScript
1var arr = []; //空の配列で初期化
2arr.push({text:"resas_data",size:35});
3
4console.log(JSON.stringify(arr));
5//=> [{"text":"resas_data","size":35}]