Javascript 使用D3使用csv文件绘制图形_Javascript_Html_Csv_D3.js

Javascript 使用D3使用csv文件绘制图形

javascript html csv d3.js

Javascript 使用D3使用csv文件绘制图形,javascript,html,csv,d3.js,Javascript,Html,Csv,D3.js,因此，我开始学习d3，并坚持学习如何使用CSV文件来实现条形图例如，我想绘制一个条形图，显示按季节分组的节目或按季节分组的节目我该怎么做呢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title> <script type="te

因此，我开始学习d3，并坚持学习如何使用CSV文件来实现条形图

例如，我想绘制一个条形图，显示按季节分组的节目或按季节分组的节目

我该怎么做呢

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="D3/d3.js"></script>
<style type="text/css">   
        </style>
    </head>
    <body>
        <script type="text/javascript">
var w = 500;
var h = 100;
var barPadding = 2;

var dataset = [5, 10, 15, 20, 30]
d3.csv("csv.csv", function(data) {
   dataset = data.map(function(d) { return [ +d["episodes"], +d["seasons"] ]; });
});


var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
            svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", 20)
   .attr("height", 100)




        </script>
    </body>
</html>

你看到了吗？嗨，你在服务器上运行它吗？或者，您是否试图在不运行服务器的情况下访问本地计算机上的a文件（即使它位于本地计算机上）

Shows   Episodes    Seasons
Simpsons    1          6
Star Wars   15         2
Lost         2         1
King of Queens  3      8
WWE         1          10