從d3.js

我想從一個CSV文件訪問特定的變量csv文件訪問的列/字段，如下圖所示：從d3.js

月，年，葉月，2011年20月 2011年，30 2011年3月，40

我想要實現的是創建一個高度爲葉值的條形圖。以下是我用來從導入的csv文件訪問葉子字段的代碼。我在這裏做錯了，因爲我是D3.js的新手，對於訪問對象或引用對象（通常的語法）我感到非常困惑。我不在乎年，月，我只是想用葉子創建一個簡單的條形圖。任何幫助或指向寶貴的資源將不勝感激。

感謝

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src="d3.min.js"></script> 
    <h4> D3 Bar Chart </h4> 
</head> 
<style> 
    .bar{ 
     display:inline-block; 
     width: 20px; 
     height: 80px; 
     margin-right: 2px; 
     background-color: teal; 
    } 

</style> 
<body> 
<script> 
d3.csv("sl_month_year.csv", function(error, data) 
{ if(error) { 
    console.log(error);} 
    else {console.log(data); 
    var bar = d3.selectAll("body") 
       .select("div") 
       .data(data.length) 
       .enter() 
       .append("div") 
       .attr("class","bar") 
       .style("height", function(d) { for (i=0; i <= d.length; i++) { return d.[i].leaves + "px" ;}); 

});

來源

2015-07-28 Jans

我看，似乎我錯了代碼中的幾件事情。首先，您嘗試在循環中使用d。[i] .leaves訪問屬性;我認爲你想要做的是d [i] .leaves。其次，你實際上並不需要循環你的集合中的元素，因爲D3會爲你處理這些元素。我會去使用選擇的不同方式，使用一個簡單的選擇身體和一個selectAll的div，並綁定到數據直接而不是data.length。下面

代碼應該罰款（雖然未經測試）：

d3.csv("sl_month_year.csv", function(error, data){ 
    if(error) { 
     console.log(error);} 
    else { 
     console.log(data); 
     var bar = d3.select("body") 
      .selectAll("div") 
      .data(data) 
      .enter() 
      .append("div") 
      .attr("class","bar") 
      .style("height", function(d) {   
         return d.leaves + "px" ; 
      }); 

});

來源

2015-07-28 10:14:56

回答

相關問題