首页帮我使用webStrom通过d3.js代码做一份空气污染的柱状图

帮我使用webStrom通过d3.js代码做一份空气污染的柱状图

时间: 2023-06-16 10:07:41 浏览: 85

好的，首先你需要在webStrom中新建一个HTML文件，并在文件中引入d3.js库。可以通过以下方式引入： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js Bar Chart Example</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 在这里编写d3.js代码 </script> </body> </html> ``` 接下来，你需要编写d3.js代码来创建柱状图。下面是一个简单的空气污染柱状图的代码示例： ```javascript // 数据 var data = [ {city: "北京", pm25: 120}, {city: "上海", pm25: 80}, {city: "广州", pm25: 150}, {city: "深圳", pm25: 90}, {city: "杭州", pm25: 100}, ]; // 宽度和高度 var width = 500; var height = 300; // x轴比例尺 var x = d3.scaleBand() .range([0, width]) .padding(0.1) .domain(data.map(function(d) { return d.city; })); // y轴比例尺 var y = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data, function(d) { return d.pm25; })]); // 创建svg元素 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); // 添加x轴 svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // 添加y轴 svg.append("g") .call(d3.axisLeft(y)); // 添加柱子 svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.city); }) .attr("y", function(d) { return y(d.pm25); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.pm25); }); ``` 这段代码将创建一个空气污染柱状图，其中包括x轴、y轴和柱子。你可以根据自己的需求进行修改和调整。

阅读全文