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文件按行創建條形圖

回答

相關問題