0
変数xとyを宣言した後に、<svg>タグとそれ以降のすべてがWebブラウザのインスペクタに表示されなくなった理由を教えてください。今述べた変数を削除すると、<svg>タグとそのid = bar属性が正しく表示され、次のコードと同様に表示されます。d3.jsからWebインスペクタへの情報を表示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="./scripts/d3/d3.min.js"></script>
<script type="./scripts/d3js.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/d3css.css">
<title>d3</title>
</head>
<body>
<script type="text/javascript">
var data = [213,20,60,232,150,74,110,39];
var w = 1000;
var h = 500;
var x = d3.scale.linear()
.domain([0, data.length])
.range([0,w]);
var y = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0,h]);
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d,i){
return i * 40;
})
.attr("y", 0)
.attr("width", 39)
.attr("height", function(d,i){
return y(d);
})
</script>
</body>
</html>