Я пытаюсь сделать простую гистограмму с D3, но на моей странице веб-браузера она просто белая и не показывает никаких ошибок. Я использую XAMPP, Apache модуль запущен. В моем веб-браузере я делаю http://localhost/d3/project/test2.html, чтобы попасть в свой проект, но, как я уже сказал, он просто белый. Мой CSV - просто страна, население с 5 наборами данных. Файлы "API", "CHANGES", "d3", "d3.min", "LICENSE" и "README" в моей папке d3. Если я go к элементам и go через прямоугольники, он показывает меня для каждого "прямоугольника 0 * 0". Это мой код:
const svg = d3.select("svg");
const width = parseFloat(svg.attr("width"));
const height = +(svg.attr("height"));
//showing bar
const render = data => {
//xaxis
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)])
.range([0, width]);
//yaxis
const yScale = d3.scaleBand()
.domain(data.map(d => d.country))
.range([0, height]);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("y", d => yScale(d.country))
.attr("width", d => xScale(d.population))
.attr("height", yScale.bandWidth);
};
d3.csv("test.csv").then(function(data) {
//convert
data.forEach(d => {
d.population = +d.population * 1000;
});
render(data)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing2</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<svg width="960" height="500"></svg>
</body>
</html>