从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

回答

相关问题