Я пытаюсь создать простую гистограмму, используя следующий код. Кажется, есть некоторая проблема с элементом svg, из-за которой гистограмма не отображается в окне браузера. Единственный вывод, который я получаю, это "Гистограмма с использованием D3.js". Я использую MacOS + Chrome.
Также я не уверен, требуется ли "<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.10/polyfills.js"></script>"
Следующими файлами являются index.js и index.html соответственно.
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500,
svgHeight = 300,
barPadding = 5; //ht and wt
var barWidth = (svg / dataset.length); //each bar wt
var svg = d3.select('svg') //give attr of wt and ht
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect") //create bar chart with rect
.data(dataset) //provide dataset
.enter() //takes data from waiting state perform operation
.append("rect")
.attr("y", function(d) {
return svgHeight - d
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function(d, i) {
var translate = [barWidth * i, 0]; //[x axis, y axis]
return "translate(" + translate + ")"; //translate one bar after another
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>Basics of D3.js</title>
</head>
<body>
<h1>Bar chart using D3.js</h1>
<svg class="bar-chart"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.10/polyfills.js"></script>
<script src="index.js"></script>
</body>
</html>