0

我正在尝试使用 D3 制作一个简单的条形图，但在我的网络浏览器页面上它只是白色的，并且没有显示任何错误。我使用 XAMPP，Apache 模块是启动的。在我的网络浏览器上，我执行http://localhost/d3/project/test2.html来访问我的项目，但正如我所说，它只是白色的。我的 CSV 只是一个国家，人口有 5 个数据集。我的 d3 文件夹中的文件“API”、“CHANGES”、“d3”、“d3.min”、“LICENSE”和“README”。如果我去元素，并通过矩形，它会显示每个“rect 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>

4

0 回答 0