Uncaught TypeError: 未定義のプロパティ 'linear' は読み取れません。
2023-10-08 20:28:54
質問
D3は初めてなのですが、デモスクリプトで次のようなエラーが発生します。
FirstD3.jsp:31 Uncaught TypeError: Cannot read property 'linear' of undefined
私のデモコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Linear Scales</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var dataset = [
[ 5, 20 ],
[ 460, 90 ],
[ 250, 50 ],
[ 100, 33 ],
[ 330, 95 ],
[ 410, 12 ],
[ 468, 44 ],
[ 25, 67 ],
[ 85, 21 ],
[ 220, 88 ]
];
var w = 500;
var h = 100;
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([0, h]);
var svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function (d) {
return Math.sqrt(h-(d[1]));
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
return d[0]+","+d[1];
})
.attr("x", function (d) {
return xScale(d[0]);
})
.attr("y", function (d) {
return yScale(d[1]);
})
.attr("font-size", "11px")
.attr("fill", "red");
</script>
</body>
</html>
このエラーの原因は何ですか? また、それを解決する方法は?
どのように解決するのですか?
D3では
v4
という名前はもうありません。
d3.scale.linear()
. 使用方法
d3.scaleLinear()
を使います。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン