D3：如何用csv文件按行创建条形图

我刚开始玩D3，并使用.CSV文件创建了我的第一个条形图。D3：如何用csv文件按行创建条形图

CSV文件看起来如下：

"browser","marketshare" 
"firefox", 20 
"IE", 45 
"Chrome", 30 
"opera", 5

使用将导致4个矩形我的矩形下面的代码为20的身高，45，30，5

.attr("height", function(d) { return d.marketshare; });

现在我有一个稍微不同的文件

"browser","2001","2002","2003","2004" 
"firefox",20,19,22,25 
"IE", 45,40,39,35 
"Chrome", 30,33,35,37 
"opera", 5,4,5,4

我希望做的是创建5个独立的条形图一个适用于Firefox，IE，Chrome和Opera。假设我想为Firefox创建一个。我该如何改变：函数（d），以便它将创建2001,2002,2003,2004年的rectanlges，并且只针对firefox。

任何帮助非常感谢

在此先感谢！

来源

2014-06-23 user3722620

为什么不创建，如果再语句检查周围的代码块中的浏览器？另一种选择是根据浏览器更改访问的数据，并更新.data（）函数。 –

尽管只需更改attr函数中的逻辑即可完成此操作，但在此点之前将数据分割得更干净。你需要四个数组（每个浏览器一个），每个只包含高度值。

这是你如何做到这一点：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Data Sort</title> 
    <link rel="stylesheet" type="text/css" href="css/styles.css"/> 
    <script type="text/javascript" src="scripts/d3.js"></script> 
</head> 

<body> 

<script type="text/javascript"> 
    var browsers = []; 
    var w = 500; 
    var h = 100; 
    var barPadding = 3; 
    d3.csv("data/browsers.csv", 
      function(error, rows) { 
       rows.forEach(function(r) { 
        browsers.push({ 
         name: r.browser, 
         values: [r['2001'], r['2002'], r['2003'], r['2004']] 
        }) 
       }); 
       browsers.forEach(function(b){ 
        render(b); 
       }); 
      }); 

    function render(browser) { 
     var svg = d3.select("body").append("svg") 
       .attr("width", w) 
       .attr("height", h); 

     svg.selectAll("rect") 
       .data(browser.values) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { 
        return i * (w/browser.values.length); 
       }) 
       .attr("y", function(d) { 
        return parseInt(h - d); 
       }) 
       .attr("width", (w/browser.values.length) - barPadding) 
       .attr("height", function(d) { 
        return parseInt(d); 
       }) 
       .attr("fill", function(d, i) { 
        var rgbColor = "rgb(" + Math.round((Math.random()*255)) + 
          ", " + Math.round((Math.random()*255)) + ", " + 
          Math.round((Math.random()*255)) + ")"; 
        return rgbColor; 
       }); 

     // Add a label to each SVG. 
     svg.append("text").text(browser.name).attr({"x": 0, "y": 30}); 

     // NOTE THIS RENDER FUNCTION IS MISSING THE UPDATE AND EXIT PHASES. WE 
     // ARE DOING EVERYTHING IN THE ENTER PHASE - WHICH MEANS IT WILL ONLY 
     // WORK ON STATIC DATA. 
    } 

</script> 

</body> 

</html>

来源

2014-06-23 22:15:55 david004

问题是，这是一个小文件的可接受的解决方案，但我有更大的文件，并将这个文件分成100个小文件并不是一个很好的解决方案，我想。 – user3722620

我不是说分割文件。我想说的是把数组分成许多更小的数组。每个条形图一个。 – david004

啊哈我看到了，抱歉误会。正如我在问题开始时提到的，我对D3很新。你能否告诉我如何做到这一点和/或如果可能的话提供一个教程的链接？ – user3722620

D3：如何用csv文件按行创建条形图

回答

相关问题