首页写一个利用D3. js实现数据可视化的代码

写一个利用D3. js实现数据可视化的代码

时间: 2023-05-19 12:06:29 浏览: 155

非常感谢您的提问。以下是一个使用 D3.js 实现数据可视化的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js 数据可视化示例</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 定义数据 var data = [10, 20, 30, 40, 50]; // 创建 SVG 元素 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 300); // 创建矩形元素 svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return i * 70; }) .attr("y", function(d) { return 300 - d * 5; }) .attr("width", 50) .attr("height", function(d) { return d * 5; }) .attr("fill", "steelblue"); </script> </body> </html> ``` 这段代码将创建一个 SVG 元素，并在其中绘制了一组矩形，每个矩形的高度对应数据中的一个数值。您可以根据需要修改代码中的数据和样式来实现不同的数据可视化效果。

阅读全文