0
jsonファイルを読み込み、jsonファイルの内容に基づいて単純な棒グラフを表示するコードスニペットをd3jsに書きたいと思います。私のJSONファイル、mydata.jsonは、次のとおりです。index.htmlからd3 javascript：jsonファイルを読む
[
{“name”: “Apollo_Diomedes”, “age”: 300},
{“name”: “Bjorn_the_Fellhanded”, “age”: 900},
{“name”: “Jonah_Orion”, “age”: 500}
]
d3jsコードスニペット、： <script src="http://d3js.org/d3.v4.js"></script>：
<body>
<script>
d3.json("mydata.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(x) { return x.age; })
.attr("height", 45)
.attr("y", function(x, i) { return i * 50; })
.attr("fill", "blue")
});
</script>
</body>
私はD3のV4を使用しています。
index.htmlファイルを直接開き、ローカルサーバーを開き、に移動して、hereとしました。両方とも空白の画面が表示されます。 index.htmlとmydata.jsonの両方が私のデスクトップの同じフォルダに保存されています。興味のある方のため
、それは実際にthisやや時代遅れユーチューブのチュートリアルです。それはd3 v3を実行します。
P.S.私はCSVから情報を読むことができますが、jsonは読むことができません。
あなたはとの問題を抱えています。。JSONデータを解析し、問題は、あなたがそれを呼び出すどのように私はちょうどあなたの代わりにはなりませあなたのJSON形式のデータである「'で、それだけで正常に動作します '[ {『名』：『Apollo_Diomedes』、『年齢』：300} 、 { "名前"： "Bjorn_the_Fellhanded"、 "年齢"：900}、{ "名前"： "Jonah_Orion"、 "年齢"：500} ] ' –